/* ───────────────────────────── 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.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.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-height: 1;           /* same height whether <button> or <a> */
  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.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.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; }

/* 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);
}
.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 lantern. The nav (order 1, after the
     lantern's order 0) drops to a full-width row below when the menu opens. */
  .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: 860px;
  margin: 0 auto;
}
.mc-step {
  width: 240px;
  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 ── */
.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); }

/* ═════════════════════════ 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.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); }

/* compact status pill with a pixel dot — colour carries the state */
.mc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 1px 8px 1px 7px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--mc-panel-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--mc-panel-line);
}
.mc-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
  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.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.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.png");
  color: #ffffb0;
}

/* 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; }