/* ───────────────────────────── nine-slice surfaces ─────────────────────── */

/* Panel - from gui/popup/background.png (236×34, border 6). */
.mc-panel {
  position: relative;
  border-style: solid;
  border-width: var(--mc-panel-border);
  border-image-source: url("../img/gui/panel.9e47edd34b6f.png");
  border-image-slice: 6 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  padding: clamp(16px, 3vw, 28px);
  color: var(--mc-panel-text);    /* panel.png is a DARK surface → light text */
}
.mc-panel :where(h1, h2, h3) { color: var(--mc-panel-head); }
.mc-panel .mc-muted { color: var(--mc-panel-muted); }
.mc-panel .mc-title { color: var(--mc-panel-accent); }
/* links inside a panel stay bright (panel is dark in both site themes) */
.mc-panel .mc-link { color: var(--mc-panel-accent); }
.mc-panel .mc-link:hover { color: #a6f08a; }
.mc-panel code, .mc-panel .mc-code {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--mc-panel-line);
  color: var(--mc-panel-text);
}

/* Button - from gui/widget/button.png (200×20, border 3). */
.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-style: solid;
  border-width: var(--mc-btn-border);
  border-image-source: url("../img/gui/button.53d95a07d01f.png");
  border-image-slice: 3 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  padding: 8px 18px;
  font-family: var(--mc-font);
  font-size: 1rem;
  /* Line-box tracks the icon box (1.2em) so an icon button and a text-only
     button in the same row are the SAME height - no more ragged action rows.
     Also keeps button == <a> height identical. */
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 2px 2px 0 #2b2b2b;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  user-select: none;
}
.mc-btn:hover {
  border-image-source: url("../img/gui/button_highlighted.cab2033c16e1.png");
  color: #ffffb0;
  text-decoration: none;
}
.mc-btn:active { transform: translateY(2px); }
.mc-btn[disabled],
.mc-btn.is-disabled {
  border-image-source: url("../img/gui/button_disabled.7bddce89a313.png");
  /* slice 3 fill to match button.png (all three sprites are 200×20); the old
     slice 1 stretched the disabled sprite flat so the button looked broken. */
  border-image-slice: 3 fill;
  color: #a0a0a0;
  cursor: default;
  pointer-events: none;
}
.mc-btn--small { padding: 4px 12px; font-size: 0.85rem; }
/* button icons size off the font so they match the line-box exactly → every
   button is the same height with or without an icon (fixes ragged action rows). */
.mc-btn .mc-ico-img { width: 1.2em; height: 1.2em; }

/* inline icons (SVG / pixel item) */
.mc-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.18em; }
.mc-ico--tg { color: var(--mc-tg); }
.mc-ico-img { width: 20px; height: 20px; }

/* theme toggle - Minecraft lantern. Lit lantern = current theme:
   blue soul lantern = dark (night), warm lantern = light. Sits far right.

   Square button on the full 3-unit button frame so it matches the burger and
   the rest of the GUI buttons (the slim 1-unit version broke that symmetry).
   The two lanterns are stacked and swapped with a rotating cross-fade, so
   flipping the theme reads as one lantern turning over into the other. */
.theme-toggle {
  position: relative;
  width: var(--mc-touch);
  height: var(--mc-touch);
  padding: 0;
  line-height: 0;
  justify-content: center;
  overflow: hidden;         /* keep the spinning lanterns inside the frame */
  order: 3;                 /* after the nav on desktop (used in the mobile flex) */
  grid-column: 3;
  justify-self: end;
}
.theme-toggle .ico-lantern {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 27px;
  /* opacity cross-fade + a quarter-turn flip; eased so it feels weighty,
     like a lantern being rotated rather than snapping. */
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1);
}
/* dark (default): soul lit and centered, fire flipped out of view */
.theme-toggle .ico-lantern--soul {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
  animation: lantern-glow-soul 3.2s ease-in-out infinite;
}
.theme-toggle .ico-lantern--fire {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
  filter: drop-shadow(0 0 5px rgba(255, 170, 60, 0.85));
}
/* light: fire lit and centered, soul flipped out */
[data-theme="light"] .theme-toggle .ico-lantern--soul {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
  animation: none;
  filter: drop-shadow(0 0 5px rgba(96, 206, 255, 0.75));
}
[data-theme="light"] .theme-toggle .ico-lantern--fire {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0) scale(1);
  animation: lantern-glow-fire 3.2s ease-in-out infinite;
}

/* a slow living flicker on whichever lantern is lit - each in its own hue,
   because a lantern is a light source. */
@keyframes lantern-glow-soul {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(96, 206, 255, 0.55)); }
  50%      { filter: drop-shadow(0 0 8px rgba(96, 206, 255, 0.95)); }
}
@keyframes lantern-glow-fire {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 170, 60, 0.55)); }
  50%      { filter: drop-shadow(0 0 8px rgba(255, 180, 80, 0.95)); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .ico-lantern {
    transition: opacity 0.2s linear;
    animation: none;
  }
}

.mc-badge {
  display: inline-block;
  background: var(--mc-green-dark);
  color: #fff;
  text-shadow: 1px 1px 0 #1c3a12;
  padding: 3px 10px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

/* ───────────────────────────── header / nav ────────────────────────────── */
.mc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mc-header-bg);
  border-bottom: calc(1px * var(--mc-px)) solid var(--mc-green-dark);
  backdrop-filter: blur(2px);
}
/* Right-side tools cluster (staff admin link + theme toggle). Occupies the grid's
   right column on desktop; on mobile it rides in the top row, pushed right by the
   burger's margin-left:auto. order:3 is REQUIRED: the centred nav is order:2 and
   has grid-column:2, so the cluster must be auto-placed AFTER it - at order 0 the
   col-3 cluster was placed first, which bumped the grid cursor past col 3 and
   shoved the nav onto a second row. (The old toggle carried this order:3 itself;
   wrapping it moved the duty here.) Inside the cluster the admin link is order 0
   and the toggle order 3, so the admin link always sits to its LEFT. */
.mc-header__tools {
  grid-column: 3;
  justify-self: end;
  order: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* «в админку» button - same square footprint as the theme toggle, icon centred. */
.mc-admin-link {
  width: var(--mc-touch);
  height: var(--mc-touch);
  padding: 0;
  justify-content: center;
}
.mc-admin-link__ico { width: 28px; height: 28px; }   /* match the toggle lanterns' visual weight */

.mc-header__inner {
  max-width: 1240px;        /* a touch wider than the 1100 content column so the
                               full nav fits on one row */
  margin: 0 auto;
  padding: 10px 16px;
  /* Three tracks: brand left, nav truly page-centered, theme toggle right.
     The equal 1fr side columns keep the centre column centred regardless of how
     wide the brand or toggle are. Collapses to flex on mobile (media query). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.mc-brand { display: flex; align-items: center; gap: 10px; grid-column: 1; justify-self: start; }
.mc-brand__name {
  color: var(--mc-gold);
  font-size: 1.25rem;
  text-shadow: var(--mc-shadow);
}
.mc-brand__home { display: inline-flex; align-items: center; }
.mc-brand__home:hover { text-decoration: none; }

/* Brand icon = its own button (random item-sprite easter-egg). Bare button so
   it reads as just the icon; fixed 32px box keeps the header height stable. */
.mc-brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}
.mc-brand__icon:focus-visible {
  outline: calc(2px * var(--mc-px)) solid var(--mc-gold);
  outline-offset: 2px;
}
.mc-brand__logo { display: block; }

/* Pixel-style swap: quick scale-up + tilt, then snap back. steps() makes the
   motion choppy/retro rather than smooth. Transform only → no layout shift. */
@keyframes mc-brand-pop {
  0%   { transform: scale(1)    rotate(0deg);  }
  35%  { transform: scale(1.28) rotate(-9deg); }
  65%  { transform: scale(1.12) rotate(6deg);  }
  100% { transform: scale(1)    rotate(0deg);  }
}
.mc-brand__logo--pop {
  animation: mc-brand-pop 260ms steps(5, end) 1;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .mc-brand__logo--pop { animation: none; }
}

/* ── Brand name easter-egg ────────────────────────────────────────────────────
   The title is a bare button (no navigation). Each click fires ONE of several
   randomly-chosen effects that recolor "HubMc" through the Minecraft §-code
   palette and (depending on the effect) scramble / wave / shatter / briefly
   reveal an old project name, then snap back to SITE_NAME.

   While an effect runs, main.js explodes the name into per-character
   <span class="g-ch"> elements so every letter can carry its own color, stagger
   index (--i) and random offset (--rx/--ry/--rot); on finish it restores the
   plain text node. Transforms + color only → no layout reflow. */
.project-title {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.project-title:focus-visible {
  outline: calc(2px * var(--mc-px)) solid var(--mc-gold);
  outline-offset: 3px;
}
.project-title .mc-brand__name {
  display: inline-block;
  white-space: nowrap;
}
/* Per-character cell. inline-block so each letter can transform on its own;
   color is set inline by main.js per the running effect. */
.project-title .mc-brand__name .g-ch {
  display: inline-block;
  will-change: transform;
}

/* ── Effect: magic - Minecraft §k "obfuscated" text ──
   JS rolls the glyphs/colors; a hair of flicker sells the corruption. */
.project-title.fx-magic .g-ch { animation: g-flicker 90ms steps(2, end) infinite; }
@keyframes g-flicker {
  0%, 100% { opacity: 1;   transform: translateY(0);    }
  50%      { opacity: .82; transform: translateY(-1px); }
}

/* ── Effect: rainbow - a color band is swept across the letters by JS; here we
   add a gentle per-letter bob, staggered by the inline --i index. */
.project-title.fx-rainbow .g-ch {
  animation: g-bob 900ms ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes g-bob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}

/* ── Effect: chroma - red/cyan RGB-split + micro-shake. Base color is rolled by
   JS; the split rides on text-shadow so it stays a single layer. */
.project-title.fx-chroma .g-ch {
  animation: g-chroma 120ms steps(2, end) infinite;
  animation-delay: calc(var(--i, 0) * -40ms);
}
@keyframes g-chroma {
  0%   { transform: translate(-2px,  1px); text-shadow:  2px 0 #ff5555, -2px 0 #55ffff; }
  50%  { transform: translate( 2px, -1px); text-shadow: -2px 0 #ff5555,  2px 0 #55ffff; }
  100% { transform: translate( 1px,  1px); text-shadow:  1px 0 #ff5555, -2px 0 #55ffff; }
}

/* ── Effect: wave - tall vertical sine sweep; JS cycles the color. */
.project-title.fx-wave .g-ch {
  animation: g-wave 700ms ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes g-wave {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%      { transform: translateY(-7px) scale(1.15); }
}

/* ── Effect: shatter - letters fly in from a random per-char offset/rotation and
   snap home. One-shot (not infinite). */
.project-title.fx-shatter .g-ch {
  animation: g-shatter 600ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes g-shatter {
  0%   { transform: translate(var(--rx, 0), var(--ry, 0)) rotate(var(--rot, 0deg)); opacity: .15; }
  100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

/* Reduced motion: keep the MC-color play (no vestibular motion), drop every
   transform/flicker. main.js also switches to a slow color-only runner. */
@media (prefers-reduced-motion: reduce) {
  .project-title .g-ch { animation: none !important; transform: none !important; }
}

.mc-nav { display: flex; gap: 2px; flex-wrap: wrap; order: 2; grid-column: 2; justify-self: center; }
.mc-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 7px;
  color: var(--mc-text);
  border: calc(1px * var(--mc-px)) solid transparent;
  white-space: nowrap;
}
.mc-nav__icon { width: 18px; height: 18px; }
.mc-nav__link:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}
.mc-nav__link.is-active {
  border-color: var(--mc-green);
  color: var(--mc-link-hover);
}

/* ── section dropdowns (Контент / Сервер) ──
   Pure CSS: the menu opens on hover and on keyboard focus (:focus-within), so it
   needs no JS and stays accessible. On mobile it renders expanded inline. */
.mc-nav__group { position: relative; display: flex; }
.mc-nav__trigger {
  font: inherit;
  color: var(--mc-text);
  background: transparent;
  cursor: pointer;
}
.mc-nav__caret {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 120ms steps(2, end);
}
.mc-nav__group:hover .mc-nav__caret,
.mc-nav__group:focus-within .mc-nav__caret { transform: rotate(180deg); }
.mc-nav__group.is-active > .mc-nav__trigger {
  border-color: var(--mc-green);
  color: var(--mc-link-hover);
}
.mc-nav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--mc-bg);
  border: calc(1px * var(--mc-px)) solid var(--mc-green-dark);
  box-shadow: var(--mc-shadow);
  z-index: 60;
}
.mc-nav__group:hover .mc-nav__menu,
.mc-nav__group:focus-within .mc-nav__menu { display: flex; }
.mc-nav__menulink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--mc-text);
  white-space: nowrap;
  border: calc(1px * var(--mc-px)) solid transparent;
}
.mc-nav__menulink:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}
.mc-nav__menulink.is-active { border-color: var(--mc-green); color: var(--mc-link-hover); }

/* CSS-only mobile nav */
.mc-nav-burger {
  display: none;
  margin-left: auto;
  /* same square footprint as the theme toggle → symmetric pair in the top row */
  width: var(--mc-touch);
  height: var(--mc-touch);
  padding: 0;
  justify-content: center;
  font-size: 1.3rem;
}
.mc-nav-toggle { display: none; }

@media (max-width: 1024px) {
  /* Back to flex so the burger row + drop-down nav behave as before. */
  .mc-header__inner { display: flex; flex-wrap: wrap; }
  .mc-nav-burger { display: inline-flex; }
  /* top row stays: brand … burger [admin] lantern. The nav (order 1) drops to a
     full-width row below when the menu opens, so the tools cluster must be order 0
     here (its desktop order:3 would otherwise drop it below the open nav). */
  .mc-header__tools { order: 0; }
  .theme-toggle { order: 0; }
  .mc-nav { order: 1; flex-basis: 100%; flex-direction: column; margin-left: 0; display: none; }
  .mc-nav-toggle:checked ~ .mc-nav { display: flex; }
  /* Groups expand inline (no hover dropdown on touch): the trigger becomes a
     section heading and its children sit indented beneath it. */
  .mc-nav__group { flex-direction: column; }
  .mc-nav__caret { display: none; }
  .mc-nav__menu {
    position: static;
    display: flex;
    min-width: 0;
    padding: 2px 0 2px 14px;
    margin-left: 8px;
    background: transparent;
    border: 0;
    border-left: calc(1px * var(--mc-px)) solid var(--mc-green-dark);
    box-shadow: none;
  }
}

/* ───────────────────────────── home ────────────────────────────────────── */
.mc-hero { margin-bottom: 32px; }
.mc-hero__panel { text-align: center; }
.mc-hero__tagline { color: var(--mc-panel-muted); font-size: 1.05rem; }
.mc-connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.mc-connect__ip { font-size: 1.1rem; color: var(--mc-panel-head); background: var(--mc-panel-fill); }
.mc-hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mc-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* centre the block of cards */
  align-items: flex-start;      /* a taller (2-line) card must not stretch its row */
  gap: var(--mc-gap);
  max-width: 704px;             /* 4 cards per row → balanced, centred block */
  margin: 0 auto;
}
.mc-card {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.mc-card:hover { text-decoration: none; transform: translateY(-2px); }
.mc-card__icon { width: 40px; height: 40px; }
.mc-card__title {
  color: var(--mc-panel-accent);
  font-size: 1.1rem;
  min-height: 2.2em;            /* reserve two lines so 1- and 2-line cards match */
  display: flex;
  align-items: center;
  text-align: center;
}

/* live server status - compact line under the connect IP (home hero).
   Named .mc-srv (not .mc-status) to avoid clashing with the whitelist
   status-check badge further down this file. */
.mc-srv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
  color: var(--mc-panel-muted);
  font-size: 0.95rem;
}
.mc-srv__dot {
  width: 10px;
  height: 10px;
  background: var(--mc-panel-muted);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.mc-srv.is-online .mc-srv__dot { background: var(--mc-green); }
.mc-srv.is-offline .mc-srv__dot { background: var(--mc-red); }
.mc-srv.is-online .mc-srv__state { color: var(--mc-green); }
.mc-srv.is-offline .mc-srv__state { color: var(--mc-red); }
.mc-srv__count:empty { display: none; }
.mc-srv__sep { opacity: 0.5; }

/* how-to-join steps */
.mc-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;        /* equal-height step panels */
  gap: var(--mc-gap);
  max-width: 1000px;           /* fits all four step cards on one row (4×230 + gaps) */
  margin: 0 auto;
}
.mc-step {
  width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.mc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--mc-green-dark);
  border: calc(1px * var(--mc-px)) solid var(--mc-green);
}
.mc-step__icon { width: 40px; height: 40px; }
.mc-step__title { margin: 0; color: var(--mc-panel-accent); font-size: 1.1rem; }
.mc-step__text { margin: 0; color: var(--mc-panel-muted); font-size: 0.95rem; line-height: 1.5; }

/* primary call to action */
.mc-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.mc-btn--cta { font-size: 1.15rem; padding: 12px 26px; }
.mc-cta__more { font-size: 0.95rem; }

/* ───────────────────────────── section / placeholder ───────────────────── */
.mc-section__panel { max-width: 720px; margin: 0 auto; }
.mc-section__lead { font-size: 1.05rem; color: var(--mc-panel-muted); }

/* ───────────────────────────── footer ──────────────────────────────────── */
.mc-footer {
  flex-shrink: 0;
  background: var(--mc-header-bg);
  border-top: calc(1px * var(--mc-px)) solid var(--mc-green-dark);
  margin-top: 32px;
}
.mc-link { color: var(--mc-link); }
.mc-footer__bar {
  text-align: center;
  padding: 12px 16px;
  font-size: 0.8rem;
}

/* ═════════════════════════ Stage 1 - content & wiki ═════════════════════════
   Panels use the light popup texture → dark text inside. Both site themes show
   the same panel, so reading surfaces look identical in dark and light. */

/* centred reading column for list/detail sections */
.mc-section {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--mc-gap);
}
/* Compact column for small auth forms (login, password reset) so the panel
   doesn't sprawl across the full width. */
.mc-section--narrow { max-width: 460px; }
.mc-section__head { text-align: center; }
.mc-section__head .mc-section__lead { margin: 0; }

/* Auth forms (login / password reset) sit in this narrow column. Turn the action
   row into full-width, stacked CTAs and centre the helper hints, so the buttons
   read as a deliberate block instead of a stray left-aligned cluster. */
.mc-section--narrow .mc-form__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.mc-section--narrow .mc-form__actions .mc-btn { width: 100%; justify-content: center; }
/* only the standalone form-level hints (login: «Нет аккаунта…», «Забыли пароль?»);
   field-level hints stay left-aligned with their input. */
.mc-section--narrow .mc-form > .mc-field__hint { text-align: center; }
.mc-empty { text-align: center; }

/* ── post lists (news / articles) ── */
.mc-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mc-gap);
}
@media (min-width: 680px) {
  .mc-posts { grid-template-columns: repeat(2, 1fr); }
}
.mc-post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--mc-panel-text);
}
.mc-post-card:hover { text-decoration: none; transform: translateY(-2px); }
.mc-post-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  image-rendering: auto;            /* screenshots, not pixel art */
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-post-card__body { display: flex; flex-direction: column; gap: 6px; }
.mc-post-card__title { color: var(--mc-panel-accent); font-size: 1.15rem; }
.mc-post-card__date { font-size: 0.8rem; color: var(--mc-panel-muted); }
.mc-post-card__excerpt { color: var(--mc-panel-muted); font-size: 0.95rem; }

.mc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ── single post / page / wiki article ── */
.mc-article { max-width: 820px; margin: 0 auto; }
.mc-article__title { margin-top: 0.4em; }
.mc-article__cover {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  image-rendering: auto;
  margin: 12px 0 18px;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}

/* ── rendered Markdown body (on the dark panel) ── */
.mc-prose { color: var(--mc-panel-text); line-height: 1.7; }
.mc-prose :where(h1, h2, h3, h4) {
  color: var(--mc-panel-accent);
  text-shadow: var(--mc-shadow);
  margin: 1.2em 0 0.5em;
}
.mc-prose h2 {
  border-bottom: 2px solid var(--mc-panel-line);
  padding-bottom: 0.2em;
}
.mc-prose p { margin: 0 0 0.9em; }
.mc-prose a { color: var(--mc-panel-accent); text-decoration: underline; word-break: break-word; }
.mc-prose a:hover { color: #a6f08a; }
.mc-prose ul, .mc-prose ol { margin: 0 0 0.9em; padding-left: 1.5em; }
.mc-prose li { margin: 0.2em 0; }
.mc-prose img {
  max-width: 100%;
  height: auto;
  image-rendering: auto;            /* photos/screenshots stay smooth */
  display: block;
  margin: 10px 0;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-prose code {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--mc-panel-line);
  color: #f0f3a0;
}
.mc-prose pre {
  background: rgba(0, 0, 0, 0.5);
  color: var(--mc-panel-text);
  padding: 14px;
  overflow: auto;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-prose pre code { background: transparent; border: 0; color: inherit; padding: 0; }
.mc-prose blockquote {
  margin: 0 0 0.9em;
  padding: 6px 14px;
  border-left: 4px solid var(--mc-green);
  background: rgba(0, 0, 0, 0.25);
  color: var(--mc-panel-muted);
}
.mc-prose table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.mc-prose th, .mc-prose td { border: 1px solid var(--mc-panel-line); padding: 6px 10px; }
.mc-prose th { background: rgba(255, 255, 255, 0.05); }
.mc-prose hr { border: 0; border-top: 2px solid var(--mc-panel-line); margin: 1.2em 0; }

/* ── CKEditor 5 figures: images carry resize width as inline style on <figure>,
   alignment as image-style-* classes; captions render below the image. ── */
.mc-prose::after { content: ""; display: table; clear: both; }  /* contain floats */
.mc-prose figure.image { display: table; margin: 12px 0; max-width: 100%; }
.mc-prose figure.image img { display: block; width: 100%; height: auto; margin: 0; }
.mc-prose figure.image > figcaption {
  display: table-caption;
  caption-side: bottom;
  color: var(--mc-panel-muted);
  font-size: 0.9em;
  text-align: center;
  padding: 6px 2px 0;
}
.mc-prose figure.image_resized { max-width: 100%; }      /* width set inline by CKEditor */
.mc-prose figure.image-style-align-left  { float: left;  margin: 6px 18px 12px 0; }
.mc-prose figure.image-style-align-right { float: right; margin: 6px 0 12px 18px; }
.mc-prose figure.image-style-align-center { margin-left: auto; margin-right: auto; }
.mc-prose figure.image-style-side { float: right; max-width: 50%; margin: 6px 0 12px 18px; }

/* ── wiki: sidebar tree + content ── */
/* wiki pages get a wider container so the article text isn't cramped */
.mc-main:has(.mc-wiki) { max-width: 1320px; }
.mc-wiki {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--mc-gap);
  align-items: start;
}
.mc-wiki__aside { position: sticky; top: 80px; }
.mc-wiki__content { min-width: 0; }   /* let long content wrap, not overflow */
.mc-wiki__home { display: inline-block; margin-bottom: 10px; }
@media (max-width: 860px) {
  .mc-wiki { grid-template-columns: 1fr; }
  .mc-wiki__aside { position: static; }
}

.mc-wiki-tree { display: flex; flex-direction: column; gap: 2px; }
.mc-wiki-tree__link {
  display: block;
  padding: 5px 10px;
  color: var(--mc-panel-text);
  border-left: 3px solid transparent;
}
.mc-wiki-tree__link:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; }
.mc-wiki-tree__link.is-active {
  border-left-color: var(--mc-green);
  color: var(--mc-panel-accent);
  background: rgba(126, 217, 87, 0.12);
}
.mc-wiki-tree__link--sub { padding-left: 22px; font-size: 0.95rem; }
.mc-wiki-tree__group { margin: 6px 0; }
.mc-wiki-tree__cat {
  display: block;
  padding: 5px 10px;
  color: var(--mc-panel-accent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-wiki-index .mc-wiki-tree__link { font-size: 1.05rem; }

.mc-breadcrumb { font-size: 0.85rem; margin-bottom: 6px; }
.mc-breadcrumb a { color: var(--mc-panel-accent); }

/* Page-level breadcrumb bar: sits directly under the header, above content.
   Rendered as a compact dark "chip" (a mini .mc-panel surface, dark in BOTH
   themes) so it stays readable over the textured wall background instead of
   getting lost in it. Centred, matching the site's centered-blocks style. */
.mc-breadcrumb--bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 880px;
  margin: 0 auto clamp(14px, 2.4vw, 22px);
  padding: 7px 14px;
  background: rgba(14, 16, 20, 0.78);
  border: 2px solid var(--mc-panel-line);
  box-shadow: var(--mc-shadow);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.mc-breadcrumb__link {
  color: var(--mc-panel-accent);
  text-decoration: none;
}
.mc-breadcrumb__link:hover,
.mc-breadcrumb__link:focus-visible { text-decoration: underline; }
.mc-breadcrumb__sep { color: var(--mc-panel-muted); opacity: 0.6; }
.mc-breadcrumb__current { color: var(--mc-panel-text); }

/* compact in-panel back link - replaced the «Главная / …» breadcrumb bar in the
   cabinet/tickets area. Lives INSIDE a .mc-panel head (light panel tokens) so it
   stays readable instead of getting lost on the textured page background. */
.mc-backlink {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 8px; font-size: 0.85rem;
  color: var(--mc-panel-muted); text-decoration: none;
}
.mc-backlink:hover, .mc-backlink:focus-visible { color: var(--mc-panel-accent); text-decoration: underline; }

/* ═════════════════════════ Stage 2 - bans ═══════════════════════════════════
   All bans UI sits on dark .mc-panel surfaces → light --mc-panel-* tokens. */

/* search */
.mc-search { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.mc-search__input {
  flex: 1 1 280px;
  max-width: 360px;
  font-family: var(--mc-font);
  font-size: 0.95rem;
  padding: 8px 12px;
  color: var(--mc-panel-text);
  background: rgba(0, 0, 0, 0.32);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-search__input::placeholder { color: var(--mc-panel-muted); }
.mc-search__input:focus { outline: none; border-color: var(--mc-green); }

/* type tabs */
.mc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mc-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  color: var(--mc-text);
  background: var(--mc-header-bg);
  border: calc(1px * var(--mc-px)) solid rgba(255, 255, 255, 0.12);
}
.mc-tab:hover { text-decoration: none; border-color: rgba(255, 255, 255, 0.28); }
.mc-tab.is-active { border-color: var(--mc-green); color: var(--mc-link-hover); }
.mc-tab__icon { width: 22px; height: 22px; }

/* toolbar + segmented state filter */
.mc-bans-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.mc-seg { display: inline-flex; border: 1px solid var(--mc-panel-line); }
.mc-seg__btn {
  padding: 5px 12px;
  font-size: 0.88rem;
  color: var(--mc-panel-muted);
  border-right: 1px solid var(--mc-panel-line);
}
.mc-seg__btn:last-child { border-right: 0; }
.mc-seg__btn:hover { color: var(--mc-panel-text); text-decoration: none; background: rgba(255, 255, 255, 0.05); }
.mc-seg__btn.is-active { background: var(--mc-green-dark); color: #fff; }

/* punishment cards */
.mc-bans { display: flex; flex-direction: column; gap: 7px; }
.mc-ban {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 13px;
  background: var(--mc-panel-fill);
  border: 1px solid var(--mc-panel-line);
  border-left: 4px solid var(--mc-panel-line);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.mc-ban:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
}
.mc-ban--active  { border-left-color: var(--mc-red); }
.mc-ban--perma   { border-left-color: #ff6f6b; }
.mc-ban--removed { border-left-color: var(--mc-green); }
.mc-ban--expired { border-left-color: rgba(255, 255, 255, 0.22); }
.mc-ban--event   { border-left-color: var(--mc-tg); }

/* left column: avatar (list) or punishment-type icon (player page) */
.mc-ban__figure { flex: 0 0 auto; display: inline-flex; line-height: 0; }
.mc-ban__figure--kind { padding-top: 2px; }
.mc-ban__avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--mc-panel-line);
  /* placeholder fill so the box never looks broken while mc-heads loads */
  background: rgba(255, 255, 255, 0.05);
}
.mc-ban__avatar--ip {
  background: rgba(0, 0, 0, 0.4) url("../img/icons/barrier.fe169992ffa8.png") center / 22px no-repeat;
  image-rendering: pixelated;
}
.mc-ban__kindico { width: 26px; height: 26px; flex: 0 0 auto; }

/* right column: name+status, reason, meta - stacked tight */
.mc-ban__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mc-ban__head { display: flex; align-items: center; gap: 10px; }
.mc-ban__name {
  font-size: 0.98rem;
  color: var(--mc-panel-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.mc-ban__name:hover { text-decoration: none; color: var(--mc-panel-accent); }
.mc-ban__name--kind { color: var(--mc-panel-accent); }

/* scoreboard-style status label: hard pixel slot + square marker - no SaaS pill */
.mc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 2px 9px 2px 7px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--mc-panel-text);
  background: var(--mc-panel-fill);
  border: 2px solid var(--mc-panel-line);   /* hard inventory edge, no radius */
}
.mc-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;    /* square pixel marker - colour carries the state */
  image-rendering: pixelated;
}
.mc-tag--active  { color: #ff9d99; background: rgba(214, 69, 65, 0.14); border-color: rgba(214, 69, 65, 0.42); }
.mc-tag--perma   { color: #ffb4b1; background: rgba(214, 69, 65, 0.22); border-color: rgba(214, 69, 65, 0.58); }
.mc-tag--expired { color: var(--mc-panel-muted); background: rgba(255, 255, 255, 0.05); border-color: var(--mc-panel-line); }
.mc-tag--removed { color: #9be878; background: rgba(95, 184, 59, 0.14); border-color: rgba(95, 184, 59, 0.42); }
.mc-tag--event   { color: #9bd6f5; background: rgba(42, 171, 238, 0.13); border-color: rgba(42, 171, 238, 0.42); }

.mc-ban__reason { margin: 0; color: var(--mc-panel-text); font-size: 0.92rem; white-space: pre-line; word-break: break-word; }
.mc-ban__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--mc-panel-muted);
}
.mc-ban__metalabel { opacity: 0.75; }
.mc-chip {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--mc-panel-line);
  color: var(--mc-panel-text);
}

/* player header */
.mc-player { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mc-player__avatar {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-player__id { flex: 1 1 240px; min-width: 0; }
.mc-player__name { margin: 0 0 8px; color: var(--mc-panel-head); }
.mc-player__akas { margin: 0 0 12px; font-size: 0.9rem; }
.mc-player__counts { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  color: var(--mc-panel-text);
  background: var(--mc-panel-fill);
  border: 1px solid var(--mc-panel-line);
}
.mc-count:hover { text-decoration: none; border-color: var(--mc-green); }
.mc-count.is-zero { opacity: 0.5; }
.mc-count__icon { width: 20px; height: 20px; }
.mc-count__n { font-size: 1.05rem; color: var(--mc-panel-head); }
.mc-count__label { font-size: 0.85rem; color: var(--mc-panel-muted); }

@media (max-width: 560px) {
  .mc-ban__head { flex-wrap: wrap; gap: 7px; }
}

/* ═════════════════════════ Stage 3 - map (dynmap) ═══════════════════════════
   The published dynmap(s) are embedded as cross-origin iframes inside a big
   nine-slice .mc-panel frame (like the homepage panels), centred in the normal
   page column - so the map reads as a framed widget with a bounded height
   (zoom stays inside it) instead of bleeding across the whole page.
   The bar sits on the dark panel surface → light --mc-panel-* tokens. */
/* the map page uses a wider column than the 1100px reading width so the
   framed map has room to breathe. */
.mc-main--wide { max-width: 1560px; }
.mc-map { margin: 0 auto; }
.mc-map__panel { padding: 8px; }   /* the thick nine-slice border is the frame */

.mc-map__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 6px 6px 12px;
}
.mc-map__switch { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* world switch = real nine-slice .mc-btn; the active world stays highlighted. */
.mc-map-switch__btn { padding: 6px 14px; }
.mc-map-switch__btn.is-active {
  border-image-source: url("../img/gui/button_highlighted.cab2033c16e1.png");
  color: #ffffb0;
}
.mc-map-switch__icon { width: 22px; height: 22px; flex: 0 0 auto; }

.mc-map__only {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mc-panel-text);
  font-size: 1.05rem;
}
.mc-map__hint { color: var(--mc-panel-muted); font-size: 0.85rem; margin-left: auto; }

/* the live map surface - bounded height so zoom stays inside the frame */
.mc-map__stage {
  position: relative;
  height: clamp(460px, 74vh, 860px);
  background: #0b0d10;   /* dark base so there's no white flash before load */
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-map__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: none;
}
.mc-map__frame.is-active { display: block; }

.mc-map__loading {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--mc-panel-muted);
  pointer-events: none;
}
.mc-map__loading.is-on { display: flex; }

@media (max-width: 560px) {
  .mc-map__hint { display: none; }   /* keep the switch bar to one tidy row */
}

/* ═════════════════════════ Stage 4 - media (gallery + lightbox) ══════════════
   Album index reuses .mc-posts/.mc-post-card. An album page shows a thumbnail
   grid inside one dark .mc-panel; clicking a tile opens a lightweight, library-
   free lightbox (full image or the video embed). All on dark surfaces → light
   --mc-panel-* tokens. */

/* album card with no cover → centred item-frame icon on the fill surface */
.mc-post-card__cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mc-panel-fill);
}

/* thumbnail grid */
.mc-gallery__panel { padding: clamp(10px, 2vw, 16px); }
.mc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.mc-gallery__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  color: var(--mc-panel-text);
  background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  cursor: pointer;
}
.mc-gallery__item:hover {
  text-decoration: none;
  border-color: var(--mc-green);
  transform: translateY(-2px);
}
.mc-gallery__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
}
.mc-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;            /* screenshots/photos, not pixel art */
  display: block;
}
.mc-gallery__thumb img.mc-gallery__placeholder {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
/* play badge on video tiles - a CSS triangle, no emoji/asset */
.mc-gallery__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(13, 13, 18, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.mc-gallery__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #ffffff;
}
.mc-gallery__item:hover .mc-gallery__play { background: rgba(60, 122, 38, 0.82); }
.mc-gallery__cap { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 2px; }
.mc-gallery__cap-title { font-size: 0.9rem; color: var(--mc-panel-text); line-height: 1.3; }
.mc-gallery__cap-author { font-size: 0.78rem; color: var(--mc-panel-muted); }

/* ── lightbox ── */
body.mc-lb-open { overflow: hidden; }
.mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 56px);
  background: rgba(6, 8, 11, 0.92);
}
.mc-lightbox[hidden] { display: none; }
.mc-lightbox__stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mc-lightbox__media--image {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  image-rendering: auto;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  background: #000;
}
.mc-lightbox__media--video {
  width: min(90vw, 1280px);
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  border: 0;
  background: #000;
}
.mc-lightbox__cap {
  color: var(--mc-panel-text);
  text-align: center;
  font-size: 0.95rem;
  text-shadow: var(--mc-shadow);
}
.mc-lightbox__btn {
  position: absolute;
  font-family: var(--mc-font);
  color: #fff;
  background: rgba(13, 13, 18, 0.72);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  cursor: pointer;
  line-height: 1;
  user-select: none;
}
.mc-lightbox__btn:hover { border-color: var(--mc-green); color: #ffffb0; }
.mc-lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 1.2rem; }
.mc-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  font-size: 2rem;
}
.mc-lightbox__nav--prev { left: 14px; }
.mc-lightbox__nav--next { right: 14px; }

@media (max-width: 560px) {
  .mc-lightbox__nav { width: 40px; height: 52px; font-size: 1.6rem; }
  .mc-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── whitelist form + status (Stage 5) ─────────────────────────────────── */
.mc-form { display: flex; flex-direction: column; gap: var(--mc-gap); }
.mc-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.mc-field__label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mc-panel-accent); font-size: 0.98rem;
}
.mc-input, .mc-textarea {
  width: 100%;
  font-family: var(--mc-font);
  font-size: 0.95rem;
  padding: 9px 12px;
  color: var(--mc-panel-text);
  background: rgba(0, 0, 0, 0.32);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.mc-input::placeholder, .mc-textarea::placeholder { color: var(--mc-panel-muted); }
.mc-input:focus, .mc-textarea:focus { outline: none; border-color: var(--mc-green); }

/* Native <select> restyled to match the inputs: strip the OS chrome and draw a
   pixel-art caret (inline SVG) so it themes with the panel text. */
.mc-select {
  width: 100%;
  font-family: var(--mc-font);
  font-size: 0.95rem;
  padding: 9px 38px 9px 12px;
  color: var(--mc-panel-text);
  background-color: rgba(0, 0, 0, 0.32);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23a8aeb4'%3E%3Cpath d='M1 3h2v2H1z'/%3E%3Cpath d='M3 5h2v2H3z'/%3E%3Cpath d='M5 7h2v2H5z'/%3E%3Cpath d='M7 5h2v2H7z'/%3E%3Cpath d='M9 3h2v2H9z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px 13px;
  image-rendering: pixelated;
}
.mc-select:focus { outline: none; border-color: var(--mc-green); }
.mc-select:hover { border-color: var(--mc-panel-text); }
/* The popup list itself can only take a background/color hint, not full styling;
   keep it on a dark surface to match the panel rather than a bright OS default. */
.mc-select option { background: #16181d; color: #e7ebee; }
.mc-field__hint { margin: 0; font-size: 0.82rem; color: var(--mc-panel-muted); }
.mc-field__error { margin: 0; font-size: 0.88rem; color: #ff8d8a; }

/* checkbox + label sit in a row inside .mc-checkbox-label itself, so the field
   stays a column → the validation error drops onto its own line below. */
.mc-field--check { flex-direction: column; }
.mc-checkbox-label {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; color: var(--mc-panel-text);
}
.mc-checkbox-label span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-checkbox { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--mc-green); flex: 0 0 auto; }

.mc-form__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* A POST-only button (e.g. «Выйти») wrapped in its own <form> still sits inline
   in the action row instead of dropping to a new line. */
.mc-form__actions > form { display: inline-flex; margin: 0; }
/* Action rows that sit directly in a panel (cabinet: «Мои обращения», «Настройки»)
   need breathing room from the content above - forms handle this via their own
   gap, so this only targets the bare panel case. */
.mc-panel > .mc-form__actions { margin-top: var(--mc-gap); }

/* honeypot - present in the DOM but off-screen */
.mc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* status-check result */
.mc-status-card { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.mc-status-code { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mc-status-card__nick, .mc-status-card__reason { margin: 0; }
.mc-status {
  display: inline-block; margin: 0; padding: 8px 16px;
  font-size: 1.05rem;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  border-left-width: 4px;
}
.mc-status--ok   { border-left-color: var(--mc-green); color: var(--mc-link-hover); }
.mc-status--no   { border-left-color: var(--mc-red); color: #ff8d8a; }
.mc-status--wait { border-left-color: var(--mc-gold); color: var(--mc-gold); }

/* ── ticket attachments (player thread) ───────────────────────────────────── */
/* Multi-file picker: the native control with a Minecraft-button "choose" face. */
.mc-fileinput {
  width: 100%;
  font-family: var(--mc-font);
  font-size: 0.9rem;
  color: var(--mc-panel-text);
  padding: 8px;
  background: rgba(0, 0, 0, 0.32);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-fileinput::file-selector-button {
  font-family: var(--mc-font);
  font-size: 0.85rem;
  color: #ffffff;
  text-shadow: 2px 2px 0 #2b2b2b;
  margin-right: 12px;
  padding: 6px 14px;
  cursor: pointer;
  border-style: solid;
  border-width: calc(3px * var(--mc-px));
  border-image-source: url("../img/gui/button.53d95a07d01f.png");
  border-image-slice: 3 fill;
  border-image-repeat: stretch;
  background: transparent;
}
.mc-fileinput::file-selector-button:hover {
  border-image-source: url("../img/gui/button_highlighted.cab2033c16e1.png");
  color: #ffffb0;
}

/* Clan flag: current preview + instant «Удалить флаг» button (clan.js). Replaces
   Django's clearable-file checkbox/«Очистить» with a tidy preview + danger button. */
.mc-flag-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.mc-flag-current__link { display: inline-flex; line-height: 0; flex: 0 0 auto; }
.mc-flag-current__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  background: rgba(0, 0, 0, 0.32);
}
.mc-flag-delete[disabled] { opacity: 0.6; cursor: default; }

/* Thumbnail + inline-video gallery shown under a message. */
.mc-attach { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mc-attach__item {
  display: block;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  background: rgba(0, 0, 0, 0.28);
}
.mc-attach__item--img { width: 120px; height: 120px; overflow: hidden; }
.mc-attach__item--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-attach__item--img:hover { border-color: var(--mc-green); text-decoration: none; }
.mc-attach__item--video {
  width: 300px; max-width: 100%;
  padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.mc-attach__item--video video { width: 100%; max-height: 220px; background: #000; display: block; }
.mc-attach__name { font-size: 0.8rem; word-break: break-all; }
a.mc-attach__name:hover { color: var(--mc-panel-accent); }

/* ── Player stats: cabinet chips + public «Игроки» leaderboard ──────────────── */
.mc-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Cabinet variant: even grid of equal-width stat cards instead of a
   centre-justified pile (which left a ragged, lonely last row). auto-fill keeps
   a stray last card at its normal column width rather than stretching it across
   the whole row. */
.mc-counts--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
/* Each card: icon on the left spanning both rows, then the big number above its
   label. The label gets its own line(s), so long captions wrap cleanly inside
   the card instead of colliding with the number or spilling past the border. */
.mc-counts--grid .mc-count {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 11px;
  row-gap: 1px;
  padding: 11px 14px;
}
.mc-counts--grid .mc-count__icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 26px;
  height: 26px;
}
.mc-counts--grid .mc-count__n {
  grid-column: 2;
  font-size: 1.25rem;
  line-height: 1.1;
}
.mc-counts--grid .mc-count__label {
  grid-column: 2;
  font-size: 0.8rem;
  line-height: 1.2;
}

/* Stats footer: the «Рейтинг игроков» button + the «Данные на …» timestamp,
   left-aligned like every other cabinet action row, split off from the chips
   with a divider so the button isn't glued to the timestamp. */
.mc-stats__foot {
  margin-top: var(--mc-gap);
  padding-top: var(--mc-gap);
  border-top: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.mc-stats__updated { margin: 0; font-size: 0.82rem; color: var(--mc-panel-muted); }

.mc-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-board__row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-board__row.is-top { border-color: var(--mc-gold); }
.mc-board__rank {
  flex: 0 0 2.4em; text-align: center;
  font-size: 1.1rem; color: var(--mc-panel-muted);
}
.mc-board__row.is-top .mc-board__rank { color: var(--mc-gold); }
.mc-board__player {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0; color: var(--mc-panel-text);
}
.mc-board__player:hover { text-decoration: none; }
.mc-board__avatar {
  width: 32px; height: 32px; flex: 0 0 auto;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-board__value { flex: 0 0 auto; color: var(--mc-panel-head); font-size: 1.05rem; }
.mc-board__value small { color: var(--mc-panel-muted); font-size: 0.8em; margin-left: 2px; }
/* reputation score colouring - green for positive, red for negative (matches the
   profile reputation widget), so good/bad standing reads at a glance. */
.mc-board__value.is-pos { color: #9be878; }
.mc-board__value.is-neg { color: #ff9b9b; }

/* ── clans (соц-слой) ─────────────────────────────────────────────────────── */
.mc-clan-tag { font-weight: 800; letter-spacing: 0.02em; }
.mc-clan-link { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }

.mc-clan-flag {
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  object-fit: cover; flex: 0 0 auto;
}
.mc-clan-flag--blank {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 0.72em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mc-clan-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mc-clan-head__id { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mc-clan-head__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.88rem; }

.mc-clan-roster { display: flex; flex-direction: column; }
.mc-clan-member {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--mc-panel-line);
}
.mc-clan-member:last-child { border-bottom: 0; }
.mc-clan-member__avatar {
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line); flex: 0 0 auto;
}
.mc-clan-member__name { font-weight: 600; min-width: 0; }
.mc-clan-member__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.mc-clan-member__actions form { margin: 0; }

.mc-clan-role--owner  { color: #ffd479; background: rgba(255, 200, 80, 0.14); border-color: rgba(255, 200, 80, 0.42); }
.mc-clan-role--deputy { color: #9bd0ff; background: rgba(90, 160, 255, 0.14); border-color: rgba(90, 160, 255, 0.42); }
.mc-clan-role--member { color: var(--mc-panel-muted); }

.mc-btn--danger { color: #ff9b9b; border-color: rgba(255, 90, 90, 0.5); }
.mc-btn--danger:hover { background: rgba(255, 90, 90, 0.14); }

.mc-input--color { padding: 2px; width: 64px; height: 38px; cursor: pointer; }

/* ── clan tag colour palette (calm, curated - see apps.clans CLAN_TAG_COLORS) ──
   Strict 5×2 grid so the chips line up no matter how wide the (monospace,
   variable-length) name under each one is - the old flex-wrap let the columns
   drift apart and orphaned the last chip onto its own row. Collapses to 2 even
   columns on phones, where five monospace labels can't share a row. */
.mc-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: 560px;
}
.mc-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 9px 4px; text-align: center;
  cursor: pointer; user-select: none;
  border: calc(1px * var(--mc-px)) solid transparent;
  transition: background .08s, border-color .08s;
}
.mc-swatch:hover { background: rgba(255, 255, 255, 0.045); }
/* selected swatch reads as a pressed slot (:has - same CSS-only trick as the tabs) */
.mc-swatch:has(.mc-swatch__input:checked) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--mc-panel-line);
}
/* hide the native radio but keep it focusable for keyboard/screen-readers */
.mc-swatch__input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.mc-swatch__chip {
  width: 36px; height: 36px; background: var(--swatch);
  image-rendering: pixelated;
  border: calc(2px * var(--mc-px)) solid var(--mc-panel-line);
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .08s, border-color .08s;
}
.mc-swatch__name {
  font-size: 0.72rem; line-height: 1.2; color: var(--mc-panel-muted);
  white-space: nowrap;
}
.mc-swatch:hover .mc-swatch__chip { border-color: var(--mc-panel-text); }
.mc-swatch__input:checked + .mc-swatch__chip {
  border-color: #fff; box-shadow: 0 0 0 calc(2px * var(--mc-px)) var(--swatch);
}
.mc-swatch__input:checked ~ .mc-swatch__name { color: var(--mc-panel-text); font-weight: 700; }
.mc-swatch__input:focus-visible + .mc-swatch__chip { border-color: var(--mc-green); }
@media (max-width: 560px) {
  .mc-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

/* ── profiles (соц-слой) ──────────────────────────────────────────────────── */
.mc-online-dot {
  display: inline-block; width: 8px; height: 8px;
  background: #5fb83b; image-rendering: pixelated;   /* hard square pixel, no glow */
}
.mc-clan-tag-link { font-weight: 700; text-decoration: none; }
.mc-player__bio { margin: 4px 0 0; color: var(--mc-panel-text); white-space: pre-line; }

/* filter/pager links carry #reputation so a reload lands on this block, not the
   top of the page; the margin keeps it off the viewport's very edge. */
#reputation { scroll-margin-top: 16px; }
.mc-rep { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.mc-rep__score { font-size: 1.8rem; font-weight: 800; color: var(--mc-panel-muted); }
.mc-rep__score.is-pos { color: #9be878; }
.mc-rep__score.is-neg { color: #ff9b9b; }
.mc-rep__form { margin: 12px 0 16px; }
.mc-rep__radios { display: flex; gap: 16px; }

.mc-rep__list { display: flex; flex-direction: column; }
.mc-rep__item { padding: 10px 0; border-bottom: 1px solid var(--mc-panel-line); }
.mc-rep__item:last-child { border-bottom: 0; }
.mc-rep__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-rep__author { font-weight: 600; text-decoration: none; }
.mc-rep__comment { margin: 6px 0 0; color: var(--mc-panel-text); white-space: pre-line; word-break: break-word; }

/* ── messages (соц-слой) ──────────────────────────────────────────────────── */
.mc-nav__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  font-size: 0.7rem; font-weight: 700; line-height: 1;   /* hard square counter */
  color: #fff; background: #d6543f; border: 2px solid #7a2a1f;
}

.mc-dialogs { display: flex; flex-direction: column; }
.mc-dialog {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-bottom: 1px solid var(--mc-panel-line); text-decoration: none;
  transition: background 0.12s ease;
}
.mc-dialog:last-child { border-bottom: 0; }
.mc-dialog:hover { text-decoration: none; background: rgba(255, 255, 255, 0.05); }
/* unread row: a green left edge + the existing bold name / red dot read as a set */
.mc-dialog--unread { box-shadow: inset 3px 0 0 var(--mc-green); }
.mc-dialog__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-dialog__name { font-weight: 600; }
.mc-dialog__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.mc-dialog__time { flex: 0 0 auto; font-size: 0.78rem; }
.mc-dialog__head { display: flex; align-items: center; gap: 10px; }

/* Inbox search (Кабинет → Сообщения): a full-width box above the dialog list and
   the results overlay that replaces it while a query is active (inbox_search.js). */
.mc-dm-search { display: flex; margin: 4px 0 12px; }
.mc-dm-search__input { flex: 1 1 auto; width: 100%; max-width: none; }
.mc-dm-results { display: flex; flex-direction: column; }
.mc-dm-results[hidden] { display: none; }  /* author display defeats UA [hidden] - re-assert */
.mc-dm-results__section + .mc-dm-results__section { margin-top: 6px; }
.mc-dm-results__head {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--mc-panel-muted); padding: 8px 8px 4px;
}
.mc-dm-results__list { display: flex; flex-direction: column; }
.mc-dm-results__empty { color: var(--mc-panel-muted); text-align: center; padding: 18px 8px; }
.mc-dm-more { margin: 10px auto 4px; display: block; }
/* search-hit highlight inside a result snippet (ts_headline → <mark>) */
.mc-dm-result mark { background: var(--mc-green); color: #0b1a0b; border-radius: 2px; padding: 0 1px; }

/* In-conversation search (Phase 2): a bar under the chat header + the jumped-to hit.
   Browser-find layout - the match counter sits INSIDE the field's right edge, so
   there's no separate floating count block and the field reads slim. */
.mc-chat__search {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-bottom: 1px solid var(--mc-panel-line);
  background: rgba(0, 0, 0, 0.18);
}
/* Honour the `hidden` attribute: an author `display` defeats the UA [hidden]
   rule, so the bar must re-assert display:none for its own hidden state. */
.mc-chat__search[hidden] { display: none; }
.mc-chat__search-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.mc-chat__search-input {
  flex: 1 1 auto; min-width: 0; max-width: none;
  padding-top: 6px; padding-bottom: 6px; padding-right: 56px;  /* room for the counter */
}
.mc-chat__search-count {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 0.78rem; line-height: 1; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.mc-chat__search-ico { display: block; }
/* the currently-focused match: a green ring on its bubble + a one-shot pulse */
.mc-msg.is-search-hit .mc-msg__bubble {
  box-shadow: 0 0 0 2px var(--mc-green);
  animation: mc-hit-pulse 1.1s ease-out 1;
}
@keyframes mc-hit-pulse {
  0%   { box-shadow: 0 0 0 2px var(--mc-green); }
  45%  { box-shadow: 0 0 0 5px var(--mc-green); }
  100% { box-shadow: 0 0 0 2px var(--mc-green); }
}

/* The conversation is ONE viewport-locked panel (VK-style): a peer header strip on
   top, the scrolling message log in the middle, the composer pinned at the bottom.
   The whole panel fits the screen, so the input and the latest message are visible
   without ever page-scrolling (the profile hero is hidden on this page). */
.mc-chat {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  /* Query container: the header adapts to the PANEL's own width (the cabinet
     sidebar makes panel width != viewport), so the icon-collapse has no "dead
     zone" where full-text buttons overflow onto the avatar. */
  container-type: inline-size;
  height: calc(100vh - 132px);
  height: calc(100dvh - 132px);
  min-height: 460px;
}

/* peer header merged into the panel: back · avatar · name · presence · actions */
.mc-chat__head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 10px 16px;
  border-bottom: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-chat__back { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
.mc-chat__head .mc-chat__peer { flex: 1 1 auto; min-width: 0; }
.mc-chat__head-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.mc-chat__head-actions form { margin: 0; }

/* the log grows to fill the gap and scrolls inside, behind a thin square pixel
   scrollbar (no foreign OS bar). min-height:0 lets the flex child actually scroll. */
.mc-chat__log {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px 16px;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;                              /* Firefox */
  scrollbar-color: var(--mc-panel-line) transparent;
}
/* WebKit/Blink - a hard square pixel thumb (inset via a transparent border) */
.mc-chat__log::-webkit-scrollbar { width: 10px; }
.mc-chat__log::-webkit-scrollbar-track { background: transparent; }
.mc-chat__log::-webkit-scrollbar-thumb {
  background: var(--mc-panel-line); border: 3px solid transparent; background-clip: padding-box;
}
.mc-chat__log::-webkit-scrollbar-thumb:hover { background: var(--mc-panel-muted); background-clip: padding-box; }
/* Few messages → anchor them to the BOTTOM (chat convention); when they overflow
   the auto margin collapses to 0 so the top stays reachable (no flex-scroll clip). */
.mc-chat__log > :first-child { margin-top: auto; }

/* a message = an optional sender name (theirs, first of a run) above its bubble */
/* align-self: flex-start is the NEUTRAL pre-JS default - server render emits .mc-msg
   without is-mine/is-theirs (alignment is added client-side), and a flex child with no
   align-self would stretch to the column's full width (align-items: stretch) for the
   split second before messaging.js runs. Pinning flex-start keeps the bubble at its
   content width from the first paint; .is-mine / .is-theirs / .mc-msg--system each set
   their own align-self below, so the resolved layout is unchanged. */
.mc-msg { position: relative; display: flex; flex-direction: column; align-self: flex-start; align-items: flex-start; min-width: 0; max-width: min(78%, 560px); margin-top: 8px; }
.mc-msg.is-cont { margin-top: 2px; }                 /* tighten a same-sender run */
.mc-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.mc-msg.is-theirs { align-self: flex-start; align-items: flex-start; }

.mc-msg__name { display: none; margin: 0 0 2px 3px; font-size: 0.7rem; color: var(--mc-panel-muted); }
/* the name shows only above the FIRST of the other party's run (never on my own) */
.mc-msg.is-theirs:not(.is-cont) .mc-msg__name { display: block; }
/* clickable nicks -> profile: keep the sender name's muted look (underline on hover),
   make the system-message nicks a touch brighter so they read as links in the pill. */
.mc-msg__name-link { color: inherit; text-decoration: none; }
.mc-msg__name-link:hover { text-decoration: underline; }
.mc-msg__sys-nick { color: var(--mc-panel-head); text-decoration: none; }
.mc-msg__sys-nick:hover { text-decoration: underline; }
/* Read receipts - a single thin green double-check (✓✓) on a message once it's been
   read, identical for DMs and group chats (Telegram-like). placeReadEl (messaging.js)
   still decides WHICH message carries it: a reader's marker sits on their last-read
   message, so ✓✓ appears wherever someone's read-cursor rests. The avatar heads stay
   in the DOM (hidden) so the context menu can still answer "кто прочитал N" - the
   per-message count lives only there now, not inline. Drawn from an SVG mask in the
   accent green; no number, no pile of heads. */
#mc-read-pool { display: none; }
.mc-msg__reads {
  display: block; width: 19px; height: 11px; margin-top: 3px; line-height: 0;
  background-color: var(--mc-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2011'%3E%3Cpath%20d='M1%205L4.5%208.5L9%202.5'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'/%3E%3Cpath%20d='M7%205L10.5%208.5L19%201'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2011'%3E%3Cpath%20d='M1%205L4.5%208.5L9%202.5'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'/%3E%3Cpath%20d='M7%205L10.5%208.5L19%201'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mc-msg__reads .mc-read-avatar { display: none; }   /* heads live only in the context menu now */

.mc-msg__bubble {
  min-width: 0; max-width: 100%;                     /* clamp to the row so a nowrap reply-quote clips with ellipsis, not overflow the bubble off-screen */
  padding: 4px 9px; border-radius: 2px;              /* compact near-square MC bubble */
  line-height: 1.4;
  background: var(--mc-panel-fill); border: 1px solid var(--mc-panel-line);
  word-break: break-word; overflow-wrap: anywhere;
}
.mc-msg.is-mine .mc-msg__bubble {
  background: color-mix(in srgb, var(--mc-green) 15%, transparent);
  border-color: color-mix(in srgb, var(--mc-green) 42%, transparent);
}
.mc-msg__body { white-space: pre-wrap; }
.mc-msg__deleted { font-style: italic; }

/* Compact timestamp: a tiny right-aligned line under the body. Block (not floated) so
   bubbles stay flush-right in a run - a right float corrupts the shrink-to-fit width of
   each bubble and the run "staircases". Always shown on the LAST of a run; on grouped
   (non-tail) bubbles it's hidden but revealed on hover, so a run isn't a wall of times
   yet every message's time stays reachable. markDeleted re-appends the <time> after the
   placeholder, so it stays valid inside the bubble. */
.mc-msg__time {
  display: block; margin-top: 1px; font-size: 0.6rem; line-height: 1.25;
  color: var(--mc-panel-muted); text-align: right; white-space: nowrap;
}
.mc-msg:not(.is-tail) .mc-msg__time { opacity: 0; transition: opacity 0.12s ease; }
.mc-msg:not(.is-tail):hover .mc-msg__time { opacity: 1; }

/* Reply quote - the message this bubble answers, shown above its body. One level
   only (the template never recurses). Clickable: jumps to the quoted message. */
.mc-msg__quote {
  display: block; width: 100%; box-sizing: border-box;   /* spans the full bubble width (Telegram-style); long previews ellipsis */
  margin: 1px 0 4px; padding: 2px 8px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  border: 0; border-left: 2px solid var(--mc-green); border-radius: 2px;
  background: rgba(0, 0, 0, 0.14);
}
.mc-msg__quote:hover { background: rgba(0, 0, 0, 0.22); }
.mc-msg__quote-name {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--mc-green);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-msg__quote-text {
  display: block; font-size: 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Hover actions (reply; forward later) - a small icon button beside the bubble,
   on the side away from the sender (theirs → right, mine → left). Touch devices
   have no hover, so reveal them there permanently. */
/* The action zone TOUCHES the bubble edge (left/right:100%) and spans the full row
   height, bridging to the button with padding (not an empty margin). So the cursor
   moving from the bubble to the button never crosses a non-hovering gap - the prior
   6px margin gap made the control flicker away before it could be reached. */
.mc-msg__actions {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.mc-msg:hover .mc-msg__actions, .mc-msg__actions:focus-within { opacity: 1; pointer-events: auto; }
.mc-msg.is-theirs .mc-msg__actions { left: 100%; padding-left: 7px; }
.mc-msg.is-mine .mc-msg__actions { right: 100%; padding-right: 7px; }
.mc-msg__act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  color: var(--mc-panel-muted); background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line); border-radius: 2px;
}
.mc-msg__act:hover { color: var(--mc-text); border-color: var(--mc-panel-muted); }
.mc-msg__act svg { display: block; }
.mc-msg__quote:focus-visible, .mc-msg__act:focus-visible {
  outline: calc(2px * var(--mc-px)) solid var(--mc-gold); outline-offset: 1px;
}
/* On a thread you've blocked the composer is disabled - hide the reply action so it
   isn't a dead control (a future forward action stays: it targets OTHER users). */
.mc-chat--readonly .mc-msg__reply { display: none; }
@media (hover: none) {
  .mc-msg__actions { opacity: 1; pointer-events: auto; }
}

/* Composer pinned at the bottom of the panel - textarea grows, button never shrinks */
.mc-chat__form {
  flex: 0 0 auto;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 16px; border-top: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-chat__form .mc-textarea { flex: 1 1 auto; resize: none; min-height: 44px; max-height: 160px; overflow-y: hidden; }
.mc-chat__form .mc-btn { flex: 0 0 auto; }
/* Reply composer plaque - sits between the log and the composer while a reply is
   being written; mirrors the search bar's strip. Honour [hidden] over the author
   display (same reason as .mc-chat__search). */
.mc-chat__reply {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  border-top: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  background: rgba(0, 0, 0, 0.14);
}
.mc-chat__reply[hidden] { display: none; }
.mc-chat__reply-bar { flex: 0 0 auto; align-self: stretch; width: 3px; background: var(--mc-green); border-radius: 2px; }
.mc-chat__reply-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mc-chat__reply-name {
  font-size: 0.74rem; font-weight: 600; color: var(--mc-green);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-chat__reply-text { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-chat__reply .mc-btn { flex: 0 0 auto; }

/* status + "you blocked them" notice sit below the composer, inside the panel */
.mc-chat__status, .mc-chat__blockmsg { flex: 0 0 auto; margin: 0; padding: 8px 16px 12px; }

/* "Переслано от X" - a small label above a forwarded message's body */
.mc-msg__fwd { display: block; margin-bottom: 2px; font-size: 0.68rem; font-style: italic; }

/* ── selection toolbar (replaces the composer while picking messages) ── */
.mc-chat__selbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-top: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-chat__selbar[hidden] { display: none; }
.mc-chat__selcount { font-size: 0.85rem; }
.mc-chat__selacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* While selecting: a message is a click target, and its hover actions are suppressed. */
.mc-chat--selecting .mc-msg { cursor: pointer; }
.mc-chat--selecting .mc-msg__actions { display: none; }
.mc-msg.is-selected .mc-msg__bubble { box-shadow: 0 0 0 2px var(--mc-green); }

/* ── modal (forward picker + delete-scope choice) ── */
.mc-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mc-modal[hidden] { display: none; }
.mc-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.mc-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 84vh;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.mc-modal__dialog--narrow { max-width: 340px; }
.mc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-modal__title { font-weight: 600; }
.mc-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* forward recipient picker */
/* flex:0 0 auto cancels .mc-search__input's `flex: 1 1 280px` - in this COLUMN modal
   that basis/grow would otherwise blow the input up to fill the dialog vertically. */
.mc-fwd-search { width: 100%; max-width: none; flex: 0 0 auto; }
.mc-fwd-results {
  display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto;
  scrollbar-width: thin;                              /* match the chat log's pixel bar */
  scrollbar-color: var(--mc-panel-line) transparent;
}
.mc-fwd-results::-webkit-scrollbar { width: 10px; }
.mc-fwd-results::-webkit-scrollbar-track { background: transparent; }
.mc-fwd-results::-webkit-scrollbar-thumb {
  background: var(--mc-panel-line); border: 3px solid transparent; background-clip: padding-box;
}
.mc-fwd-results::-webkit-scrollbar-thumb:hover { background: var(--mc-panel-muted); background-clip: padding-box; }
.mc-fwd-recipient { width: 100%; text-align: left; cursor: pointer; background: none; border: 0; font: inherit; color: inherit; }
.mc-fwd-recipient:hover, .mc-fwd-recipient:focus-visible { background: var(--mc-panel-fill); }
.mc-fwd-status, .mc-del-hint { margin: 0; }
.mc-del-hint { font-size: 0.78rem; }
/* lock background scroll while a modal is open (mirrors the lightbox's body lock) */
body.mc-modal-open { overflow: hidden; }
/* selection toggle while active reads as "on" */
.mc-chat__act.is-active { box-shadow: inset 0 0 0 calc(2px * var(--mc-px)) var(--mc-green); }
/* Narrowest phones: shrink the (now two) per-message actions and the bubble so the
   permanently-shown touch actions can't clip off the right edge of an incoming row. */
@media (max-width: 400px) {
  .mc-msg { max-width: 70%; }
  .mc-msg__act { width: 24px; height: 24px; }
  .mc-msg.is-theirs .mc-msg__actions { padding-left: 5px; }
  .mc-msg.is-mine .mc-msg__actions { padding-right: 5px; }
}

/* Mobile: the conversation goes full-screen - the profile hero, the bottom-bar nav
   and the footer are hidden on this page (see the cabinet block below), so the chat
   only sits under the sticky site header. The header height is the sole subtrahend;
   these are tuned against the real render (composer must clear the bottom edge). */
@media (max-width: 820px) {
  .mc-chat { height: calc(100dvh - 72px); min-height: 420px; }
}
@media (max-width: 560px) {
  .mc-chat { height: calc(100dvh - 70px); min-height: 380px; }
  .mc-chat__form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
/* Narrow PANEL (not viewport): when the chat panel itself is too tight for the
   full-text actions, collapse them to icon-only squares and drop the long
   "last seen" so the header stays ONE row and never rides onto the avatar. The
   single-row base (nowrap + ellipsis name) lives in the unconditional rules above. */
@container (max-width: 760px) {
  .mc-chat__head { gap: 8px; padding: 9px 12px; }
  .mc-chat__back { padding-left: 10px; padding-right: 10px; }
  .mc-chat__act { padding-left: 10px; padding-right: 10px; gap: 0; }
  /* label clipped but accessible (icon stays) */
  .mc-chat__act-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mc-chat__peerid .mc-presence { display: none; }   /* drop the long "был N назад"; the avatar dot stays */
}
/* Phone-width panel: a single header row can't hold back + avatar + a real chat title
   + the action buttons - the title collapsed to "кубиче..." and the buttons rode off
   the edge. So STACK it: back + avatar + name own the top row (the name finally gets
   the full width), and the icon-only actions drop onto their own row beneath a hairline,
   right-aligned. They stay icon-only here (full labels like «Заблокировать» can't fit a
   phone row even stacked); the icons are a touch larger for a comfortable tap target. */
@container (max-width: 480px) {
  .mc-chat__head { flex-wrap: wrap; row-gap: 8px; }
  .mc-chat__head-actions {
    flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
    padding-top: 8px; border-top: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  }
  .mc-chat__act { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 400px) {
  .mc-chat { height: calc(100dvh - 66px); min-height: 340px; }
}

/* ═════════════════════════ Stage 6 - social redesign ════════════════════════
   Profiles, clans, friends, DMs + the shared presence badge. Everything sits on
   dark .mc-panel surfaces → light --mc-panel-* tokens, Minecraft-GUI pixel look.
   New classes only; existing .mc-player / .mc-board / .mc-clan-* / .mc-dialog /
   .mc-chat are reused and lightly extended. */

/* ── unified site-presence badge (profile · roster · friends · inbox · thread) ─ */
.mc-presence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; line-height: 1.5; color: var(--mc-panel-muted);
  white-space: nowrap; vertical-align: middle;
}
.mc-presence__dot {
  width: 8px; height: 8px; flex: 0 0 auto;
  background: var(--mc-panel-muted);   /* hard square pixel - no glow, no round */
  image-rendering: pixelated;
}
.mc-presence__txt { overflow: hidden; text-overflow: ellipsis; max-width: 20ch; }
/* full = inline square dot + muted label (VK/FB style: no capsule, no background).
   dot = bare square pixel (label rides in the title tooltip). */
.mc-presence--online { color: #8fce6e; }
.mc-presence--online .mc-presence__dot { background: var(--mc-green); }
.mc-presence--away { color: var(--mc-panel-muted); }
.mc-presence--away .mc-presence__dot { background: #d9a441; }   /* amber = recently seen */
.mc-presence--off { color: var(--mc-panel-muted); opacity: 0.8; }
.mc-presence--off .mc-presence__dot { background: var(--mc-panel-muted); opacity: 0.5; }

/* team badge (is_staff): a pixel item icon shown next to a staff member's name
   everywhere a player is named. Faint gold halo so it reads as "official" while
   the texture itself stays crisp/pixelated. */
.mc-staff-badge {
  display: inline-flex; align-items: center; vertical-align: -0.12em;
  margin-left: 0.28em; line-height: 0; flex: 0 0 auto;
}
.mc-staff-badge__ico {
  width: 1em; height: 1em;   /* scales with the surrounding name's font-size */
  filter: drop-shadow(0 0 2px rgba(255, 209, 102, 0.7));
}

/* avatar wrapper with a corner status pixel (dot-mode badge overlaid bottom-right) */
.mc-avatar { position: relative; display: inline-flex; flex: 0 0 auto; line-height: 0; }
.mc-avatar .mc-presence--dot { position: absolute; right: -3px; bottom: -3px; }
.mc-avatar .mc-presence--dot .mc-presence__dot {
  width: 11px; height: 11px;
  border: 2px solid #11131a;   /* hard dark pixel ring lifts the marker off the avatar (panels are dark in both themes) */
}

/* ── section title with a leading pixel icon ─────────────────────────────────── */
.mc-title--ico { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-title--ico > img { width: 22px; height: 22px; flex: 0 0 auto; }
.mc-title__count { color: var(--mc-panel-muted); font-size: 0.8em; font-weight: 400; }

/* sub-section heading + divider inside a panel - keeps grouped lists apart
   (e.g. incoming friend requests above the friends grid) so they don't read as
   one glued pile. .mc-subsection draws the rule that splits the two groups. */
.mc-subhead {
  margin: 0 0 10px; font-size: 0.95rem; color: var(--mc-panel-head);
  display: inline-flex; align-items: center; gap: 8px;
}
.mc-subhead__count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; line-height: 1;   /* hard square alert chip */
  background: #d6543f; color: #fff;
}
.mc-subsection {
  margin-bottom: var(--mc-gap); padding-bottom: var(--mc-gap);
  border-bottom: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}

/* ── profile hero header (extends .mc-player) ────────────────────────────────── */
.mc-player__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.mc-player__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 0; }
/* breathing room before the hero action row so the clan tag / status never
   touches the buttons (esp. when the player has no bio between them) */
.mc-player__id .mc-form__actions { margin-top: 14px; }
.mc-clan-tag-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border: 2px solid var(--mc-panel-line);
  background: var(--mc-panel-fill);
}
.mc-clan-tag-link:hover { text-decoration: none; border-color: var(--mc-green); }

/* ── reputation summary: net score + the +/- breakdown (which doubles as the
   review filter, .mc-rep__tabs) on one row - no duplicate counters ──────────── */
.mc-rep__tabs { margin: 0; }

/* +rep / -rep vote buttons - animated toggle, no JS (radios drive the state) */
.mc-rep__vote { display: flex; gap: 12px; flex-wrap: wrap; }
.mc-repbtn { position: relative; cursor: pointer; user-select: none; }
.mc-repbtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mc-repbtn__face {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; font-family: var(--mc-font); font-size: 1.05rem; line-height: 1.2;
  color: var(--mc-panel-text); background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);   /* hard pixel button, no pill */
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mc-repbtn__face img { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.mc-repbtn:hover .mc-repbtn__face { transform: translateY(-2px); }
.mc-repbtn:active .mc-repbtn__face { transform: scale(0.93); }
.mc-repbtn--up:hover .mc-repbtn__face { border-color: rgba(95, 184, 59, 0.6); color: #9be878; }
.mc-repbtn--down:hover .mc-repbtn__face { border-color: rgba(214, 69, 65, 0.6); color: #ff9b9b; }
.mc-repbtn--up:has(input:checked) .mc-repbtn__face {
  background: rgba(95, 184, 59, 0.18); border-color: var(--mc-green); color: #bdf0a3;
  box-shadow: inset 0 0 0 1px rgba(95, 184, 59, 0.4); animation: mc-rep-pop 0.32s ease;
}
.mc-repbtn--down:has(input:checked) .mc-repbtn__face {
  background: rgba(214, 69, 65, 0.18); border-color: #d64541; color: #ffb4b1;
  box-shadow: inset 0 0 0 1px rgba(214, 69, 65, 0.4); animation: mc-rep-pop 0.32s ease;
}
.mc-repbtn input:focus-visible + .mc-repbtn__face { outline: calc(2px * var(--mc-px)) solid var(--mc-gold); outline-offset: 2px; }
@keyframes mc-rep-pop { 0% { transform: scale(1); } 45% { transform: scale(1.13); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mc-repbtn .mc-repbtn__face { animation: none !important; transition: none; }
  .mc-repbtn:hover .mc-repbtn__face, .mc-repbtn:active .mc-repbtn__face { transform: none; }
}

/* ── friends list (VK-style rows: avatar · name + "last seen" · row actions) ──── */
.mc-friends { display: flex; flex-direction: column; gap: 8px; }
.mc-friend {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-friend:hover { background: rgba(255, 255, 255, 0.04); }
/* the avatar+name half is the clickable link to the profile; actions sit apart so
   we can nest a <form>/<a> in the row (an <a> can't wrap them). */
.mc-friend__main {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto;
  color: var(--mc-panel-text);
}
.mc-friend__main:hover { text-decoration: none; }
.mc-friend__main:hover .mc-friend__name { color: var(--mc-green); }
.mc-friend__avatar { width: 40px; height: 40px; flex: 0 0 auto; border: calc(1px * var(--mc-px)) solid var(--mc-panel-line); }
.mc-friend__id { display: flex; flex-direction: column; min-width: 0; gap: 2px; flex: 1 1 auto; }
.mc-friend__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* full row width here, so the presence label never gets squeezed into ellipsis */
.mc-friend .mc-presence__txt { max-width: none; }
.mc-friend__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mc-friend__actions form { margin: 0; }
/* compact square icon button (MC-pixel look) - pairs the two row actions neatly */
.mc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  color: var(--mc-panel-text); background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  transition: transform 0.12s ease, border-color 0.2s ease;
}
.mc-iconbtn img { width: 18px; height: 18px; flex: 0 0 auto; }
.mc-iconbtn:hover { text-decoration: none; border-color: var(--mc-green); transform: translateY(-1px); }
.mc-iconbtn--danger:hover { border-color: #d6543f; }
@media (prefers-reduced-motion: reduce) { .mc-iconbtn:hover { transform: none; } }
/* phones: tighten the row, keep "last seen" the priority. main keeps a min-width so
   when the actions can't fit alongside it they wrap to a second line (right-aligned)
   instead of squeezing the status into an ellipsis. */
@media (max-width: 560px) {
  .mc-friend { gap: 9px; padding: 8px 10px; flex-wrap: wrap; }
  .mc-friend__main { flex: 1 1 60%; min-width: 150px; }
  .mc-friend__avatar { width: 36px; height: 36px; }
  .mc-friend__actions { margin-left: auto; }
  .mc-iconbtn { width: 32px; height: 32px; }
}

/* ── compact friends tiles (VK-style) - profile preview only ───────────────────
   A wrapping grid of avatar tiles + truncated nick, so a 6-friend preview is two
   short rows instead of six tall rows. The cabinet list and the full friends page
   keep the wide rows (.mc-friend) for the room their actions/labels need. */
.mc-friends--tiles {
  display: grid; column-gap: 8px; row-gap: 0;
  /* auto-fit → tiles grow to fill the row (no empty-track gap on wide screens);
     a single visible row (template-rows:auto) with implicit rows collapsed to 0 +
     overflow:hidden → overflow is clipped to one clean row, never a lone orphan.
     So it shows as many as fit (more on desktop, ~5 on a phone); «Показать всех»
     covers the rest. */
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden;
}
.mc-ftile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px; text-align: center; text-decoration: none;
  color: var(--mc-panel-text); background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-ftile:hover { background: rgba(255, 255, 255, 0.04); text-decoration: none; }
.mc-ftile:hover .mc-ftile__name { color: var(--mc-green); }
.mc-ftile__ava img { width: 48px; height: 48px; border: calc(1px * var(--mc-px)) solid var(--mc-panel-line); }
.mc-ftile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }

/* ── friend search (cabinet: typeahead box + results dropdown) ───────────────── */
.mc-friend-search { position: relative; margin-bottom: 16px; }
.mc-friend-search__field {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-friend-search__field:focus-within { border-color: var(--mc-green); }
.mc-friend-search__ico { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.7; }
.mc-friend-search__input {
  flex: 1 1 auto; min-width: 0; padding: 0; font: inherit;
  color: var(--mc-panel-text); background: transparent; border: 0; outline: none;
}
.mc-friend-search__input::placeholder { color: var(--mc-panel-muted); }
/* results sit over the page (incoming requests / friends grid) so they never push
   the layout; capped + scrollable for a long match list. */
.mc-friend-search__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 360px; overflow-y: auto;
  /* opaque (it overlays the friends grid) but panel-tinted, not flat black:
     the page bg lifted by the same translucent fill the panels use. */
  background-color: var(--mc-bg);
  background-image: linear-gradient(var(--mc-panel-fill), var(--mc-panel-fill));
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.mc-friend-search__item {
  display: flex; align-items: center; gap: 12px; padding: 8px 13px;
  border-bottom: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-friend-search__item:last-child { border-bottom: 0; }
.mc-friend-search__item:hover { background: rgba(255, 255, 255, 0.04); }
.mc-friend-search__id {
  display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto;
  color: var(--mc-panel-text);
}
.mc-friend-search__id:hover { text-decoration: none; }
.mc-friend-search__id:hover .mc-friend-search__name { color: var(--mc-green); }
.mc-friend-search__avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-friend-search__name {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* symmetric action buttons: every row's button shares one width so the column
   lines up no matter the label ("Добавить в друзья" vs "В друзьях"). */
.mc-friend-search__action { flex: 0 0 auto; }
.mc-friend-search__action .mc-btn { min-width: 168px; justify-content: center; }
.mc-friend-search__empty {
  margin: 0; padding: 14px; text-align: center; color: var(--mc-panel-muted);
}
@media (max-width: 560px) {
  .mc-friend-search__item { gap: 9px; padding: 9px 10px; }
  .mc-friend-search__avatar { width: 36px; height: 36px; }
  .mc-friend-search__action .mc-btn { min-width: 0; }
}

/* ── rich empty state (icon + title + hint, framed) ──────────────────────────── */
.mc-empty--rich {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 16px; color: var(--mc-panel-muted);
  border: calc(1px * var(--mc-px)) dashed var(--mc-panel-line);
  background: rgba(255, 255, 255, 0.03);
}
.mc-empty--rich img { width: 40px; height: 40px; opacity: 0.7; margin-bottom: 2px; }
.mc-empty__title { color: var(--mc-panel-text); font-size: 1rem; }

/* ── clan leaderboard medals (refine the generic .is-top) ────────────────────── */
.mc-board__row.is-rank1 { border-color: var(--mc-gold); background: rgba(252, 219, 5, 0.07); }
.mc-board__row.is-rank2 { border-color: rgba(196, 202, 212, 0.55); }
.mc-board__row.is-rank3 { border-color: rgba(205, 127, 50, 0.6); }
.mc-board__row.is-rank1 .mc-board__rank { color: var(--mc-gold); }
.mc-board__row.is-rank2 .mc-board__rank { color: #d7dde6; }
.mc-board__row.is-rank3 .mc-board__rank { color: #d08a4a; }
/* leaderboard sort tabs read as the table header: flush them to the board panel */
.mc-tabs--board { justify-content: flex-start; margin-bottom: -1px; }

/* ── clan header stat chips (detail/manage) ──────────────────────────────────── */
.mc-stat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-stat-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  background: var(--mc-panel-fill); border: 2px solid var(--mc-panel-line);
}
.mc-stat-chip img { width: 18px; height: 18px; flex: 0 0 auto; }
.mc-stat-chip__n { color: var(--mc-panel-head); font-size: 1rem; }
.mc-stat-chip__label { color: var(--mc-panel-muted); font-size: 0.78rem; }

/* visually-hidden (a11y label kept off-screen but read by assistive tech) */
.mc-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── rating legend (list header): what the clan score is made of ─────────────── */
.mc-rating-legend {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 7px 16px; font-size: 0.86rem; color: var(--mc-panel-muted);
}
.mc-rating-legend__head { color: var(--mc-panel-text); font-weight: 600; }
.mc-rating-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.mc-rating-legend__ico { width: 16px; height: 16px; flex: 0 0 auto; }
/* centre the header CTA under the centred title/lead (actions left-align elsewhere) */
.mc-section__head .mc-form__actions { justify-content: center; }

/* ── clan leaderboard: fixed-column grid so member heads + scores line up ─────── */
.mc-board--clans .mc-board__row {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto 5.6em;
  align-items: center; gap: 14px;
}
.mc-board--clans .mc-board__value { text-align: right; }
/* member count per row - fixed width so every head sits in the same column */
.mc-board__members {
  width: 3.7em; justify-content: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; font-size: 0.9rem; color: var(--mc-panel-muted);
  background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-board__members-ico { width: 14px; height: 14px; flex: 0 0 auto; }

/* mobile: the 4-column grid squeezes the name to 0 - reflow so the clan name
   gets a full line (and a real tap target), with members under it and the score
   pinned right across both rows. */
@media (max-width: 560px) {
  .mc-board--clans .mc-board__row {
    grid-template-columns: 2.2em minmax(0, 1fr) auto;
    grid-template-areas:
      "rank player value"
      "rank members value";
    column-gap: 10px; row-gap: 4px;
  }
  .mc-board--clans .mc-board__rank { grid-area: rank; }
  .mc-board--clans .mc-board__player { grid-area: player; }
  .mc-board--clans .mc-board__members { grid-area: members; }
  .mc-board--clans .mc-board__value { grid-area: value; align-self: center; }
  /* fill the cell so the whole name line is tappable, not just the glyphs */
  .mc-board--clans .mc-board__name { display: block; width: 100%; padding: 2px 0; }
}

/* ── clan leader badge (detail header) ───────────────────────────────────────── */
.mc-leader { display: inline-flex; align-items: center; gap: 9px; color: var(--mc-panel-text); }
.mc-leader:hover { text-decoration: none; }
.mc-leader:hover .mc-leader__name { color: var(--mc-panel-accent); }
.mc-leader__avatar {
  width: 28px; height: 28px; flex: 0 0 auto;
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-leader__meta { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.mc-leader__label {
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mc-panel-muted);
}
.mc-leader__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── rating breakdown table (detail): activity total → points → итого ────────── */
.mc-rating { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.mc-rating__row {
  display: grid; grid-template-columns: 1fr auto minmax(4.5em, auto);
  align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--mc-panel-line);
}
.mc-rating__row:last-child { border-bottom: 0; }
.mc-rating__label { display: inline-flex; align-items: center; gap: 9px; color: var(--mc-panel-text); min-width: 0; }
.mc-rating__ico { width: 20px; height: 20px; flex: 0 0 auto; }
.mc-rating__amount { color: var(--mc-panel-muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.mc-rating__points {
  text-align: right; color: var(--mc-panel-head);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.mc-rating__row--total {
  margin-top: 2px; padding-top: 12px; border-bottom: 0;
  border-top: calc(2px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-rating__row--total .mc-rating__label { font-weight: 700; color: var(--mc-panel-head); }
.mc-rating__row--total .mc-rating__points { color: var(--mc-gold); font-size: 1.15rem; }

/* ── "create clan" invite card + eligibility progress (manage, no clan) ──────── */
.mc-invite-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mc-invite-card__icon { width: 52px; height: 52px; }
.mc-progress {
  width: min(360px, 100%); height: 14px; overflow: hidden;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--mc-panel-line);
}
.mc-progress__bar { height: 100%; background: var(--mc-green); transition: width 0.4s ease; }
.mc-progress__bar--full { background: var(--mc-gold); }

/* ── clan header: compact title + action pinned to the right ──────────────────
   The flag, identity column and the action share one row; the action floats to
   the far right and drops below the identity on narrow screens (no giant CTA). */
.mc-clan-head__title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.mc-clan-head__action {
  margin-left: auto; align-self: center;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.mc-clan-head__action form { margin: 0; }

@media (max-width: 560px) {
  .mc-clan-head__action {
    margin-left: 0; align-self: stretch; align-items: stretch; flex-basis: 100%;
  }
  .mc-clan-head__action .mc-btn { width: 100%; justify-content: center; }
}

/* ── clan editor: one panel, a header strip + CSS-only tabbed sections ─────────
   Everything that used to be five stacked panels (roster, requests, invite,
   settings, danger) now lives in a single panel switched by radio tabs - no JS,
   panel visibility is driven by :has() on the checked radio. */
.mc-clan-editor { display: flex; flex-direction: column; gap: 0; }
.mc-clan-editor__head {
  align-items: flex-start;
  padding-bottom: var(--mc-gap);
  border-bottom: calc(2px * var(--mc-px)) solid var(--mc-panel-line);
}
/* in the editor the action is a small "open public page" link → pin it to the
   top-right, level with the title, not floating in the middle of the row */
.mc-clan-editor__head .mc-clan-head__action { align-self: flex-start; }

.mc-tabs-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mc-tabnav {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: var(--mc-gap) 0; padding-bottom: 2px;
}
.mc-tabnav__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer; user-select: none;
  color: var(--mc-panel-muted); font-size: 0.95rem;
  background: var(--mc-panel-fill);
  border: calc(1px * var(--mc-px)) solid transparent;
}
.mc-tabnav__btn img { width: 18px; height: 18px; flex: 0 0 auto; }
.mc-tabnav__btn:hover { color: var(--mc-panel-text); border-color: rgba(255, 255, 255, 0.18); }
.mc-tabnav__btn .mc-cabinet__count { margin-left: 2px; }

/* active tab - radios precede .mc-tabnav, so a sibling combinator reaches the label */
#ct-roster:checked   ~ .mc-tabnav label[for="ct-roster"],
#ct-requests:checked ~ .mc-tabnav label[for="ct-requests"],
#ct-invite:checked   ~ .mc-tabnav label[for="ct-invite"],
#ct-settings:checked ~ .mc-tabnav label[for="ct-settings"] {
  color: var(--mc-panel-accent);
  background: rgba(126, 217, 87, 0.12);
  border-color: var(--mc-green);
}
/* keyboard focus ring for the label-as-button */
.mc-tabnav__btn:focus-visible { outline: calc(2px * var(--mc-px)) solid var(--mc-gold); outline-offset: 1px; }
/* link-based active tab (e.g. the reputation +REP/−REP filter) - same look as the
   radio-driven active state above, but driven by a server-set .is-active class */
a.mc-tabnav__btn { text-decoration: none; }
.mc-tabnav__btn.is-active {
  color: var(--mc-panel-accent);
  background: rgba(126, 217, 87, 0.12);
  border-color: var(--mc-green);
}

.mc-tabpanel { display: none; }
.mc-tabs-host:has(#ct-roster:checked)   [data-tab="roster"],
.mc-tabs-host:has(#ct-requests:checked) [data-tab="requests"],
.mc-tabs-host:has(#ct-invite:checked)   [data-tab="invite"],
.mc-tabs-host:has(#ct-settings:checked) [data-tab="settings"] { display: block; }

/* danger zone inside the settings tab: a quiet inline strip, not a full panel */
.mc-clan-danger {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: var(--mc-gap); padding-top: var(--mc-gap);
  border-top: 1px solid var(--mc-panel-line);
}
.mc-clan-danger__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-clan-danger__title { font-weight: 700; color: #ff9b9b; }
.mc-clan-danger form { margin: 0 0 0 auto; }

/* ── inbox: unread accent (avatar status dot comes from .mc-avatar) ──────────── */
.mc-dialog__main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mc-dialog__id { gap: 2px; }
.mc-dialog__namerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mc-dialog__namerow .mc-dialog__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-dialog--unread .mc-dialog__name { color: var(--mc-panel-head); font-weight: 700; }
.mc-dialog--unread .mc-dialog__preview { color: var(--mc-panel-text); }
.mc-dialog__badge {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; line-height: 1;   /* hard square counter */
  color: #fff; background: #d6543f; border: 2px solid #7a2a1f;
}
/* per-dialog "has unread" marker - a square pixel, since the per-thread count isn't loaded */
.mc-dialog__new { flex: 0 0 auto; width: 9px; height: 9px; background: #d6543f; image-rendering: pixelated; }
/* group rows carry a real unread count (cursor model), DMs the dot above */
.mc-dialog__count {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  color: #fff; background: #d6543f; border: 2px solid #7a2a1f;
}

/* ── unified inbox: pin + group rows ─────────────────────────────────────────── */
/* Stretched-link pattern: the whole row is clickable via an absolute overlay link,
   while the pin button (higher z-index) catches its own click without navigating. */
.mc-dialog { position: relative; }
.mc-dialog__link { position: absolute; inset: 0; z-index: 1; }
.mc-dialog__main, .mc-dialog__time, .mc-dialog__new, .mc-dialog__count { position: relative; z-index: 0; }
.mc-dialog__pin {
  position: relative; z-index: 2; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; width: 24px; height: 24px;
  padding: 0; color: var(--mc-panel-muted); background: transparent; border: 0;
  cursor: pointer; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
}
.mc-dialog:hover .mc-dialog__pin { opacity: 0.7; }
.mc-dialog__pin:hover { opacity: 1; color: var(--mc-panel-accent); }
.mc-dialog.is-pinned .mc-dialog__pin { opacity: 1; color: var(--mc-green); }
.mc-dialog.is-pinned { background: rgba(126, 217, 87, 0.05); }
/* group avatar: a square tile with a "people" glyph when there's no custom thumb */
.mc-avatar--group { border-radius: 0; }
.mc-avatar__group-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--mc-panel-muted);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--mc-panel-line);
}
.mc-chat__peer .mc-avatar__group-ico { width: 40px; height: 40px; }

/* ── system messages (centered pill in the chat log) ─────────────────────────── */
.mc-msg.mc-msg--system {
  align-self: center; align-items: center; max-width: 90%;
  margin: 8px auto; text-align: center;
}
.mc-msg__sys {
  display: inline-block; padding: 2px 10px; font-size: 0.66rem; opacity: 0.82;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--mc-panel-line);
  border-radius: 2px;
}

/* ── message context menu (Telegram-style) ───────────────────────────────────
   Right-click / long-press a message -> reply, copy, forward, select, "кто
   прочитал", delete. Built by messaging.js; replaces the old hover buttons. The
   panel scales+fades in from the pointer (transform-origin set inline per open).
   On touch we suppress text-selection/callout so the long-press reads as a press. */
.mc-ctx { position: fixed; inset: 0; z-index: 130; }
.mc-ctx[hidden] { display: none; }
.mc-ctx__backdrop { position: absolute; inset: 0; }
.mc-ctx__panel {
  position: absolute; min-width: 210px; max-width: 280px; max-height: 80vh;
  padding: 5px; display: flex; flex-direction: column; overflow-y: auto;
  color: var(--mc-panel-text);                        /* dark surface -> light text, both themes */
  background: var(--mc-surface);
  border: calc(1px * var(--mc-px)) solid var(--mc-panel-line); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  scrollbar-width: thin; scrollbar-color: var(--mc-panel-line) transparent;
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.13s ease-out, transform 0.14s cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.mc-ctx.is-open .mc-ctx__panel { opacity: 1; transform: scale(1); }
.mc-ctx__panel::-webkit-scrollbar { width: 8px; }
.mc-ctx__panel::-webkit-scrollbar-thumb { background: var(--mc-panel-line); border: 2px solid transparent; background-clip: padding-box; }
.mc-ctx__item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; font: inherit; font-size: 0.9rem; line-height: 1.1; text-align: left;
  color: var(--mc-panel-text); background: transparent; border: 0; border-radius: 3px; cursor: pointer;
}
.mc-ctx__item:hover, .mc-ctx__item:focus-visible { background: var(--mc-panel-fill); outline: none; }
.mc-ctx__item--danger { color: var(--mc-red); }
.mc-ctx__item.is-empty { cursor: default; color: var(--mc-panel-muted); }
.mc-ctx__item.is-empty:hover { background: transparent; }
.mc-ctx__ico { flex: 0 0 auto; display: inline-flex; width: 16px; height: 16px; color: var(--mc-panel-muted); }
.mc-ctx__item--danger .mc-ctx__ico { color: var(--mc-red); }
.mc-ctx__ico svg { display: block; }
.mc-ctx__lbl { flex: 1 1 auto; }
.mc-ctx__sep { height: calc(1px * var(--mc-px)); margin: 4px 6px; background: var(--mc-panel-line); }
/* seen row: ✓✓ green tick, count, a few overlapping heads + a chevron to expand */
.mc-ctx__seen-head .mc-ctx__ico { color: var(--mc-green); }
.mc-ctx__seen-mini { flex: 0 0 auto; display: inline-flex; }
.mc-ctx__seen-mini img { width: 18px; height: 18px; border-radius: 2px; margin-left: -5px; border: 1px solid var(--mc-surface); image-rendering: pixelated; }
.mc-ctx__seen-mini img:first-child { margin-left: 0; }
.mc-ctx__chev { flex: 0 0 auto; display: inline-flex; color: var(--mc-panel-muted); transition: transform 0.12s ease; }
.mc-ctx__seen-head.is-expanded .mc-ctx__chev { transform: rotate(90deg); }
.mc-ctx__seen-list {
  display: flex; flex-direction: column; max-height: 188px; overflow-y: auto;
  margin: 2px 4px 2px 8px; padding-left: 6px; border-left: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  scrollbar-width: thin; scrollbar-color: var(--mc-panel-line) transparent;
}
.mc-ctx__seen-list[hidden] { display: none; }
.mc-ctx__reader { display: flex; align-items: center; gap: 9px; padding: 4px 4px; font-size: 0.84rem; }
.mc-ctx__reader img { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 2px; image-rendering: pixelated; }
.mc-ctx__reader span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On touch, a long-press shouldn't start a text selection or the iOS callout. */
@media (hover: none) {
  .mc-msg__bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ── role pills + the manage panel ───────────────────────────────────────────── */
.mc-pill {
  display: inline-flex; align-items: center; padding: 1px 7px;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; border: 2px solid var(--mc-panel-line);
  color: var(--mc-panel-muted); background: rgba(255, 255, 255, 0.05);
}
.mc-pill--owner { color: #d4b25e; border-color: rgba(212, 178, 94, 0.5); }
.mc-pill--admin { color: #8fce6e; border-color: rgba(95, 184, 59, 0.5); }
.mc-pill--moder { color: #6fb3c9; border-color: rgba(111, 179, 201, 0.5); }
.mc-pill--member { color: var(--mc-panel-muted); }

.mc-dm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* «Участники и настройки» modal: a wide dialog whose head stays fixed while the
   body (roster + forms) scrolls with the site pixel scrollbar. */
.mc-modal__dialog--wide { max-width: 560px; }
.mc-gc-manage { gap: 12px; }
/* Wider than the default --wide modal: each roster row carries a role pill + a role
   dropdown + up to three action buttons, which otherwise crush the nick to one char.
   Compound selector so it overrides --wide regardless of source order; vw-capped so it
   still fits narrow screens. */
.mc-modal__dialog--wide.mc-gc-manage { max-width: min(760px, 94vw); }
.mc-gc-manage__body {
  display: flex; flex-direction: column; gap: 16px; padding-top: 4px;
  overflow-y: auto; min-height: 0; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--mc-panel-line) transparent;
}
.mc-gc-manage__body::-webkit-scrollbar { width: 10px; }
.mc-gc-manage__body::-webkit-scrollbar-track { background: transparent; }
.mc-gc-manage__body::-webkit-scrollbar-thumb { background: var(--mc-panel-line); border: 3px solid transparent; background-clip: padding-box; }
.mc-gc-manage__body::-webkit-scrollbar-thumb:hover { background: var(--mc-panel-muted); background-clip: padding-box; }
.mc-chat__members-link { background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; text-decoration: underline; }
.mc-gc-manage__h { margin: 0 0 8px; font-size: 0.9rem; color: var(--mc-panel-head); }
.mc-gc-rename__row, .mc-gc-avatar__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mc-gc-invite__lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-gc-add__list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.mc-gc-add__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
/* Site pixel scrollbar for the friend lists (matches .mc-chat__log) */
.mc-gc-add__list, .mc-gc-create__friends {
  scrollbar-width: thin; scrollbar-color: var(--mc-panel-line) transparent;
}
.mc-gc-add__list::-webkit-scrollbar, .mc-gc-create__friends::-webkit-scrollbar { width: 10px; }
.mc-gc-add__list::-webkit-scrollbar-track, .mc-gc-create__friends::-webkit-scrollbar-track { background: transparent; }
.mc-gc-add__list::-webkit-scrollbar-thumb, .mc-gc-create__friends::-webkit-scrollbar-thumb {
  background: var(--mc-panel-line); border: 3px solid transparent; background-clip: padding-box;
}
.mc-gc-add__list::-webkit-scrollbar-thumb:hover, .mc-gc-create__friends::-webkit-scrollbar-thumb:hover {
  background: var(--mc-panel-muted); background-clip: padding-box;
}
.mc-gc-add__nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-gc-member { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--mc-panel-line); }
.mc-gc-member__id { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mc-gc-member__nick { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-gc-member__acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.mc-gc-member__role-form { display: flex; align-items: center; gap: 4px; }
.mc-input--small { padding: 3px 6px; font-size: 0.78rem; }
.mc-gc-manage__danger { padding-top: 8px; }

/* Phone roster: the one-row member (avatar · nick · role-select · OK · ★ · ✕) overran
   the modal - the nick collapsed to zero width and the buttons spilled off the right.
   Stack it into a two-tier card: avatar + nick + role pill on top, the per-member
   action controls on their own full-width row beneath. The role-select stretches to
   eat the row so the controls breathe instead of huddling. */
@media (max-width: 560px) {
  .mc-gc-member { flex-wrap: wrap; row-gap: 8px; }
  .mc-gc-member__id { flex: 1 1 auto; }
  .mc-gc-member__acts { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  /* basis:0 so the role select doesn't claim its full content width when the row is
     measured for wrapping - it grows to share the row, leaving OK/★/✕ visible instead
     of shoving ✕ off the edge. min-width:0 lets it actually shrink. */
  .mc-gc-member__role-form { flex: 1 1 0; min-width: 0; gap: 6px; }
  .mc-gc-member__role-form .mc-input--small { flex: 1 1 auto; min-width: 0; }
}

/* ── «Пригласить людей»: отдельная модалка (один аккуратный скролл) ──────────── */
.mc-gc-manage__invite-btn { align-self: flex-start; }
.mc-gc-invite__search { width: 100%; margin: 4px 0 10px; }
.mc-gc-invite__list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 56vh; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--mc-panel-line) transparent;
}
.mc-gc-invite__list::-webkit-scrollbar { width: 10px; }
.mc-gc-invite__list::-webkit-scrollbar-track { background: transparent; }
.mc-gc-invite__list::-webkit-scrollbar-thumb { background: var(--mc-panel-line); border: 3px solid transparent; background-clip: padding-box; }
.mc-gc-invite__list::-webkit-scrollbar-thumb:hover { background: var(--mc-panel-muted); background-clip: padding-box; }
.mc-gc-invite__empty { margin: 8px 2px; }
.mc-gc-create__friends { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; margin-top: 6px; padding-right: 4px; }
/* Friend pick = a selectable tile (no foreign-looking checkbox): the native input is
   hidden and a green frame wraps the whole row when it's selected. */
.mc-gc-create__friend {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.1s ease, background 0.1s ease;
}
.mc-gc-create__friend input { position: absolute; width: 0; height: 0; opacity: 0; }
.mc-gc-create__friend:hover { background: rgba(255, 255, 255, 0.05); }
.mc-gc-create__friend:has(input:checked) {
  border-color: var(--mc-green); background: rgba(126, 217, 87, 0.12);
}
.mc-gc-create__friend-nick { flex: 1; min-width: 0; }
.mc-gc-create__hint { margin-top: 6px; }
.mc-gc-create__actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

/* ── thread header (the peer strip inside the conversation panel) ─────────────── */
.mc-chat__peer { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.mc-chat__peer .mc-presence { font-size: 0.8rem; }
.mc-chat__peerid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-chat__peername { font-size: 1.05rem; color: var(--mc-panel-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-chat__peername a { color: var(--mc-panel-accent); }
.mc-chat__peername a:hover { color: #a6f08a; text-decoration: underline; }

/* ── account nav dropdown: avatar trigger ────────────────────────────────────── */
.mc-nav__avatar { width: 22px; height: 22px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.2); }
.mc-nav__trigger .mc-nav__badge { margin-left: 3px; }

/* ── account hub: persistent profile hero + section sidebar ───────────────────
   The cabinet, private messages and clan management all render inside this frame
   (accounts/cabinet_base.html), so the whole account area is ONE place with a
   sticky sidebar that never disappears. The sidebar is plain links (the section
   is server-rendered); the view marks the current item .is-active. */
/* the hub is two-column → give it a touch more room than the reading column */
.mc-section--hub { max-width: 1040px; }
.mc-cabinet { display: grid; grid-template-columns: 232px 1fr; gap: var(--mc-gap); align-items: start; }
.mc-cabinet__nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 84px; padding: 10px; }
.mc-cabinet__link {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  color: var(--mc-panel-text); text-decoration: none;
  border: calc(1px * var(--mc-px)) solid transparent;
}
.mc-cabinet__link:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); text-decoration: none; }
.mc-cabinet__link.is-active { background: rgba(126, 217, 87, 0.12); border-color: var(--mc-green); color: var(--mc-panel-accent); }
.mc-cabinet__link img { width: 20px; height: 20px; flex: 0 0 auto; }
.mc-cabinet__link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-cabinet__count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; line-height: 1;   /* hard square count chip */
  background: rgba(255, 255, 255, 0.1); border: 2px solid var(--mc-panel-line);
  color: var(--mc-panel-muted);
}
.mc-cabinet__count--alert { background: #d6543f; border-color: #d6543f; color: #fff; }

/* ── pixel toggle switch (settings: DM sound on/off) ─────────────────────────── */
.mc-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.mc-switch__control { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; }
.mc-switch__label { flex: 1 1 auto; min-width: 0; }
.mc-switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mc-switch__track {
  position: relative; flex: 0 0 auto; width: 44px; height: 22px;
  background: rgba(0, 0, 0, 0.4); border: calc(1px * var(--mc-px)) solid var(--mc-panel-line);
  image-rendering: pixelated; transition: background 0.15s ease, border-color 0.15s ease;
}
.mc-switch__thumb {
  position: absolute; top: 0; left: 0; width: 16px; height: 16px;
  background: var(--mc-panel-muted);   /* hard square pixel, no rounding/glow */
  transition: transform 0.15s ease, background 0.15s ease;
}
.mc-switch__input:checked + .mc-switch__track { background: rgba(95, 184, 59, 0.18); border-color: var(--mc-green); }
.mc-switch__input:checked + .mc-switch__track .mc-switch__thumb { transform: translateX(22px); background: var(--mc-green); }
.mc-switch__input:focus-visible + .mc-switch__track { outline: calc(2px * var(--mc-px)) solid var(--mc-gold); outline-offset: 2px; }
.mc-switch__label { color: var(--mc-panel-text); }
.mc-cabinet__content { display: flex; flex-direction: column; gap: var(--mc-gap); min-width: 0; }

/* hero card: avatar + identity left, the public-profile link right */
.mc-cabinet__hero { align-items: center; }
.mc-cabinet__heroava { width: 80px; height: 80px; flex: 0 0 auto; border: calc(1px * var(--mc-px)) solid var(--mc-panel-line); }
.mc-cabinet__heroaction { margin-left: auto; align-self: center; display: flex; gap: 8px; flex-wrap: wrap; }
.mc-cabinet__heroaction form { margin: 0; }

@media (max-width: 820px) {
  .mc-cabinet { grid-template-columns: 1fr; }

  /* ── cabinet sections → fixed bottom tab bar (mirrors the top header) ──────────
     The nav is a .mc-panel; neutralise its nine-slice and pin it to the viewport
     bottom as an app-style tab strip. Icon-only so all 8 sections fit one row. */
  .mc-cabinet__nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45;
    flex-direction: row; flex-wrap: nowrap; gap: 0;
    padding: 4px 2px; padding-bottom: calc(4px + env(safe-area-inset-bottom));
    border-image: none; border: 0;
    border-top: calc(1px * var(--mc-px)) solid var(--mc-green-dark);
    background: var(--mc-header-bg); backdrop-filter: blur(2px);
  }
  .mc-cabinet__link {
    position: relative; flex: 1 1 0; min-width: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 0; padding: 7px 2px; border: 0;
  }
  .mc-cabinet__link:hover { background: transparent; border: 0; }
  .mc-cabinet__link > span { display: none; }          /* icon-only: the pixel font is too wide for 8 labels */
  .mc-cabinet__link img { width: 22px; height: 22px; }
  .mc-cabinet__link.is-active { background: rgba(126, 217, 87, 0.14); border: 0; color: var(--mc-panel-accent); }
  .mc-cabinet__count {                                  /* unread → small corner badge on the icon */
    position: absolute; top: 3px; left: 52%; margin: 0; transform: translateX(-2px);
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem;
  }
  /* …but tabnav counts (reputation filter, clan-manage tabs) are inline label
     chips, NOT icon-corner badges - keep them in flow, else one floats off as a
     stray square at the top of the panel. Higher specificity wins here. */
  .mc-tabnav .mc-cabinet__count {
    position: static; transform: none; top: auto; left: auto;
    min-width: 20px; height: 20px; padding: 0 6px; font-size: 0.72rem; margin-left: 2px;
  }
  .mc-cabinet__heroaction { margin-left: 0; flex-basis: 100%; }

  /* keep the last content row clear of the fixed bar (hub pages that show it -
     an open thread hides the bar, so exclude it). */
  body:has(.mc-cabinet__nav):not(:has(.mc-chat)) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  /* the © footer looks odd wedged between the content and the fixed tab bar →
     drop it on every cabinet/hub page (the nav exists on all of them). */
  body:has(.mc-cabinet__nav) .mc-footer { display: none; }

  /* ── open conversation = full-screen ──────────────────────────────────────────
     Hide the hero and the bottom bar (the footer is already gone, above) and let
     the chat fill the viewport edge-to-edge. Keyed strictly off .mc-chat (thread
     page only) so the inbox (.mc-dialogs) keeps its hero + bottom bar. */
  .mc-section--hub:has(.mc-chat) .mc-cabinet__hero,
  .mc-cabinet:has(.mc-chat) .mc-cabinet__nav { display: none; }
  .mc-main:has(.mc-chat) { padding: 0; max-width: none; }
  .mc-section--hub:has(.mc-chat),
  .mc-cabinet:has(.mc-chat),
  .mc-cabinet__content:has(.mc-chat) { gap: 0; }
  .mc-cabinet__content > .mc-chat { border-image: none; border: 0; }
}

/* ── phones: reclaim horizontal width ─────────────────────────────────────────
   The panel nine-slice border is 18px/side (6px source × --mc-px 3) plus big
   padding, which starves nested content on a ~360-390px screen ("блоки поехали").
   Slim the border to 9px (slice `6 fill` scales 1.5× → still pixel-clean) and cut
   padding. Buttons use --mc-btn-border, so they're untouched. Global on purpose. */
@media (max-width: 560px) {
  :root { --mc-panel-border: calc(3px * var(--mc-px)); }
  .mc-panel { padding: 12px; }
  .mc-main  { padding: clamp(16px, 4vw, 24px) 10px; }
}
@media (max-width: 400px) {
  .mc-panel { padding: 10px; }
  .mc-main  { padding: 14px 8px; }
}

/* ───────────────────────────── toast notifications ─────────────────────── */
/* Compact flash messages from the Django messages framework. Fixed stack in the
   top-right (full-width on phones), each card auto-dismisses via main.js. Hard
   pixel edges + a square state marker echo the .mc-tag scoreboard look - no SaaS
   pill, no giant inline panel. */
.mc-toasts {
  position: fixed;
  top: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;   /* let clicks fall through the gaps */
}
.mc-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: #15161c;
  border: 2px solid var(--mc-panel-line);
  border-left-width: 5px;
  color: var(--mc-panel-text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
  /* enter animation: slide in from the right */
  animation: mc-toast-in 220ms ease-out both;
}
.mc-toast.is-leaving {
  animation: mc-toast-out 200ms ease-in forwards;
}
.mc-toast__mark {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  flex: 0 0 auto;
  background: currentColor;   /* square pixel marker - colour carries the state */
  image-rendering: pixelated;
}
.mc-toast__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--mc-panel-text);
  word-break: break-word;
}
.mc-toast__close {
  flex: 0 0 auto;
  margin: -4px -2px 0 0;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--mc-panel-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.mc-toast__close:hover { color: var(--mc-panel-text); }

/* level accents - the marker + left edge carry the state colour */
.mc-toast--success { color: #9be878; border-left-color: var(--mc-green); }
.mc-toast--error   { color: #ff9d99; border-left-color: var(--mc-red); }
.mc-toast--warning { color: #ffd27a; border-left-color: #e0a531; }
.mc-toast--info    { color: #9bd6f5; border-left-color: var(--mc-tg); }
.mc-toast--debug   { color: var(--mc-panel-muted); border-left-color: var(--mc-panel-line); }

@keyframes mc-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mc-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-toast, .mc-toast.is-leaving { animation: none; }
}

@media (max-width: 640px) {
  .mc-toasts {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
  }
  /* clear the cabinet bottom-bar when it's on screen (hub pages, not an open thread) */
  body:has(.mc-cabinet__nav):not(:has(.mc-chat)) .mc-toasts { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ── shop: gold accents, glowing buy buttons, storefront ─────────────────────
   The 4th "buy access" step on the home page, the upsell under the whitelist
   form, and the /shop/ storefront all share one gold treatment. */
.mc-step--gold {
  position: relative;
  outline: calc(1px * var(--mc-px)) solid rgba(252, 219, 5, 0.55);
  outline-offset: calc(-2px * var(--mc-px));
}
.mc-step--gold .mc-step__num {
  background: #7a5c00;
  border-color: var(--mc-gold);
  box-shadow: 0 0 10px rgba(252, 219, 5, 0.45);
}
.mc-step--gold .mc-step__title { color: var(--mc-gold); }
.mc-step__buy { margin-top: auto; }   /* pin the buy button to the card's bottom */

/* gold button variant + glow (buy card, storefront, whitelist upsell) */
.mc-btn--gold { color: var(--mc-gold); }
.mc-btn--gold:hover { color: #fff3b0; }
.mc-btn--glow { animation: mc-gold-glow 2.2s ease-in-out infinite; }
@keyframes mc-gold-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(252, 219, 5, 0.45)); }
  50%      { filter: drop-shadow(0 0 12px rgba(252, 219, 5, 0.85)); }
}
@media (prefers-reduced-motion: reduce) {
  .mc-btn--glow { animation: none; }
}

/* /whitelist: the "don't wait, buy now" upsell under the submit actions */
.mc-buy-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: calc(1px * var(--mc-px)) solid rgba(252, 219, 5, 0.25);
  text-align: center;
}
.mc-buy-hint__lead { margin: 0; color: var(--mc-panel-muted); font-size: 0.95rem; }

/* /shop storefront grid */
.mc-shop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--mc-gap);
  /* Fit all three 280px cards on one row (3*280 + 2*16 gap = 872); wraps on
     narrower viewports. */
  max-width: 900px;
  margin: 0 auto;
}
.mc-shop__item {
  width: 280px;
  max-width: 100%;   /* на узком экране карточка сжимается, а не пушит страницу вширь */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.mc-shop__icon { width: 48px; height: 48px; }
.mc-shop__title { margin: 0; color: var(--mc-gold); font-size: 1.15rem; }
.mc-shop__desc { margin: 0; color: var(--mc-panel-muted); font-size: 0.95rem; line-height: 1.5; }
.mc-shop__price { margin: 0; font-size: 1.4rem; color: var(--mc-heading); }
.mc-shop__buy { margin-top: auto; }

/* ── Донат: ползунок суммы (buy-страница «Поддержать сервер») ─────────────────── */
.mc-shop__donate { display: flex; flex-direction: column; gap: 8px; }

/* Крупный живой вывод выбранной суммы. */
.mc-shop__amount {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.05;
  color: var(--mc-gold);
}

/* Кастомный слайдер «зелья»: врезанный паз (.mc-range-track) заливается амбер-
   зельем (.mc-range-fill, ширину задаёт shop.js) по мере движения; ручка -
   текстура мяса; при перетаскивании сыплются пиксель-партиклы (canvas, рисует
   shop.js). Нативный <input type=range> лежит сверху прозрачным - видна только
   ручка, доступность (стрелки/Tab/aria) сохраняется. */
.mc-range-wrap {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 2px 0;
}
/* Паз - вырезанная тёмная щель с внутренней тенью. Вреза́н ровно по ходу ЦЕНТРА
   ручки: ручка-мясо ездит центром от THUMB/2 до (ширина-THUMB/2), поэтому паз
   поджат на THUMB/2 (19px) с каждого края - тогда на максимуме мясо доходит до
   конца и «пустого» хвоста паза за ним не остаётся, а на минимуме паз пуст. */
.mc-range-track {
  position: absolute;
  left: 19px;
  right: 19px;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  background: #07070a;
  border: 3px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.55), inset 0 -2px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;          /* «зелье» обрезается по пазу */
  image-rendering: pixelated;
}
/* «Зелье» - амбер-заливка слева (верхний блик имитирует поверхность жидкости). */
.mc-range-fill {
  width: 0;
  height: 100%;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.40) 0, rgba(255, 255, 255, 0.12) 3px,
      transparent 4px, transparent 100%),
    linear-gradient(to bottom, #ffd23f 0%, #f2a63b 55%, #c9791f 100%);
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.22);
}
/* Слой партиклов - поверх паза, под ручкой; кликам не мешает. */
.mc-range-particles {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Нативный input - прозрачный, на всю обёртку; видна только ручка-мясо. */
.mc-range {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: grab;
}
.mc-range:active { cursor: grabbing; }
.mc-range::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
/* Свободная ручка-мясо (без подложки). Заливка поднимается до ЦЕНТРА ручки (см.
   shop.js), поэтому мясо «лежит» на поверхности зелья без тёмного зазора; на
   минимуме перекрытие сходит на нет, и амберу неоткуда торчать. */
.mc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 38px;
  height: 38px;
  margin-top: 3px;       /* центрируем 38px ручку по 44px треку: (44-38)/2 */
  border: 0;
  background: transparent url("../img/items/cooked_beef.f005144f93cb.png") center / contain no-repeat;
  image-rendering: pixelated;
}
.mc-range::-moz-range-track { height: 100%; background: transparent; border: 0; }
.mc-range::-moz-range-progress { background: transparent; }
.mc-range::-moz-range-thumb {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent url("../img/items/cooked_beef.f005144f93cb.png") center / contain no-repeat;
  image-rendering: pixelated;
}
.mc-range:focus-visible { outline: none; }
.mc-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--mc-gold); outline-offset: 2px; }
.mc-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--mc-gold); }

/* Кнопки-пресеты (100 / 500 / 1000 / 5000 ₽) - в один ряд, чтобы не растягивать
   страницу: четыре равные колонки вместо переноса на вторую строку. */
.mc-shop__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mc-shop__presets .mc-btn {
  padding: 4px 4px;
  justify-content: center;
  font-size: 0.78rem;
  white-space: nowrap;   /* «1000 ₽» / «5000 ₽» в одну строку даже на узких экранах */
}
.mc-shop__amount-input { text-align: center; }

/* ── /shop: топ донатеров + лента последних покупок ──────────────────────────── */
.mc-shop-aside {
  display: grid;
  /* min(300px, 100%) вместо голого 300px: на экранах уже 300px минимум трека = 100%
     ширины, поэтому колонка не пушит страницу в горизонтальный скролл (классический
     фикс переполнения auto-fit на мобильных). */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--mc-gap);
  max-width: 900px;  /* align with the .mc-shop card row above */
  margin: var(--mc-gap) auto 0;
  align-items: start;
}
.mc-shop__board-title {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mc-gold);
  font-size: 1.1rem;
}
.mc-shop__top .mc-board__value { color: var(--mc-gold); }

/* Лента покупок: аватар + ник/сумма сверху, под ними строка «товар + время»
   (переносится, а не режется многоточием - длинные названия видны целиком). */
.mc-shop__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-shop__feed-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar nick amount"
    "avatar meta meta";
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  padding: 8px 10px;
  background: var(--mc-panel-fill);
  border: calc(2px * var(--mc-px)) solid var(--mc-panel-line);
}
.mc-shop__feed-avatar { grid-area: avatar; width: 24px; height: 24px; }
.mc-shop__feed-nick {
  grid-area: nick; align-self: end;
  color: var(--mc-panel-head);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-shop__feed-amount {
  grid-area: amount; align-self: end; justify-self: end;
  color: var(--mc-green); white-space: nowrap;
}
.mc-shop__feed-meta {
  grid-area: meta; align-self: start;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font-size: 0.85rem; line-height: 1.3;
}
.mc-shop__feed-item { color: var(--mc-panel-muted); }
.mc-shop__feed-time { color: var(--mc-panel-muted); opacity: 0.75; white-space: nowrap; }

/* Мобильная раскладка витрины: карточки товаров и доски (топ донатеров + лента) -
   в одну колонку на всю ширину, чтобы ничего не уезжало за край экрана. */
@media (max-width: 560px) {
  .mc-shop__item { width: 100%; }
  .mc-shop-aside { grid-template-columns: 1fr; }
}

/* ── Пользовательское соглашение (модалка магазина) ──────────────────────────
   Триггеры - .mc-linkbtn (кнопка-ссылка) на странице магазина и на форме покупки;
   разметка в shop/_agreement_modal.html, открытие - shop.js. */
.mc-shop__agreement-row { margin: 4px 0 0; }
/* инлайновая кнопка, выглядящая как ссылка (внутри switch-label и под лидом) */
.mc-linkbtn {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--mc-panel-accent); text-decoration: underline;
  text-underline-offset: 2px;
}
.mc-linkbtn:hover { color: #a6f08a; }
.mc-linkbtn:focus-visible { outline: calc(2px * var(--mc-px)) solid var(--mc-gold); outline-offset: 2px; }

.mc-agreement.mc-modal__dialog { max-width: min(760px, 94vw); max-height: 88vh; }
.mc-agreement__body {
  overflow-y: auto; padding-right: 6px; line-height: 1.5;
  scrollbar-width: thin;                              /* match the chat log's pixel bar */
  scrollbar-color: var(--mc-panel-line) transparent;
}
.mc-agreement__body::-webkit-scrollbar { width: 10px; }
.mc-agreement__body::-webkit-scrollbar-track { background: transparent; }
.mc-agreement__body::-webkit-scrollbar-thumb {
  background: var(--mc-panel-line); border: 3px solid transparent; background-clip: padding-box;
}
.mc-agreement__body::-webkit-scrollbar-thumb:hover { background: var(--mc-panel-muted); background-clip: padding-box; }
.mc-agreement__intro { margin: 0 0 14px; }
.mc-agreement__h { margin: 16px 0 8px; font-size: 1rem; color: var(--mc-heading); }
.mc-agreement__clause { display: flex; gap: 10px; margin: 6px 0; }
.mc-agreement__num { flex: 0 0 auto; min-width: 2.4em; color: var(--mc-panel-muted); font-weight: 600; }
.mc-agreement__req {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mc-panel-line);
}
.mc-agreement__req-row { margin: 4px 0; }
.mc-agreement__req-pay { margin: 10px 0 0; font-size: 0.9rem; }
/* Agree-to-terms row: «Согласен с условиями покупки» reads on ONE line next to the
   toggle. The decorative sign icon is dropped here (the toggle already is the control)
   and the label font/gap are nudged down a hair so the phrase clears the 460px narrow
   form with comfortable margin; it still wraps word-by-word on very narrow phones
   rather than overflowing. */
.mc-field--check .mc-switch { gap: 8px; }
.mc-field--check .mc-switch__label { line-height: 1.5; font-size: 0.92rem; }

/* Force the four "how to join" cards onto ONE row on desktop. On wide viewports
   the row never wraps and the cards flex to share the width equally; below the
   breakpoint they fall back to the wrapping fixed-width layout above. */
@media (min-width: 1000px) {
  /* max-width:none → the row fills the section width, lining up with the panels
     above (which span the full section) so the whole column stays centred.
     width:100% is required: .mc-steps' `margin:0 auto` is a cross-axis auto
     margin inside .mc-section's column flexbox, which disables align-items:
     stretch. Without a definite width the row then shrink-wraps to its
     max-content (wider than the 880px section), overflows to the RIGHT and the
     cards land off-centre under the head panel. */
  .mc-steps { flex-wrap: nowrap; max-width: none; width: 100%; }
  .mc-steps > .mc-step { width: auto; flex: 1 1 0; min-width: 0; }
}