/* Nightmare SMP live panel.
   Read-only by design: there is no input element anywhere in this component,
   and the feed it reads has no write endpoint. */

.mc-live { margin-top: 8px }

.mc-live-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.mc-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6b7280; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
}
.mc-live-dot.is-up { background: #34d399; animation: mcPulse 2.4s ease-out infinite }
.mc-live-dot.is-down { background: #ef4444 }
@keyframes mcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.5) }
  70%  { box-shadow: 0 0 0 9px rgba(52,211,153,0) }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0) }
}
.mc-live-state {
  font: 600 11px 'DM Mono', monospace; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--nova-ink, #fff);
}
.mc-live-meta {
  font: 500 11px 'DM Mono', monospace; letter-spacing: .8px;
  color: var(--nova-muted, #8a8f98);
}
.mc-live-meta b { color: var(--nova-ink, #fff); font-weight: 600 }

/* roster ------------------------------------------------------------- */
.mc-roster { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px }
.mc-player {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  border: 1px solid var(--nova-line, #262626);
  background: var(--nova-surface-2, #161616);
  font: 500 12px 'DM Mono', monospace; color: var(--nova-ink, #fff);
}
.mc-player i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; flex: 0 0 auto;
}
.mc-roster-empty {
  font: 500 12px 'DM Mono', monospace;
  color: var(--nova-muted, #8a8f98);
}

/* console ------------------------------------------------------------ */
.mc-console {
  border: 1px solid var(--nova-line, #262626);
  border-radius: 14px;
  background: #0d0d0e;
  overflow: hidden;
}
.mc-console-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--nova-line, #262626);
  background: rgba(255, 255, 255, .02);
}
.mc-console-title {
  font: 600 10px 'DM Mono', monospace; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--nova-muted, #8a8f98);
}
.mc-console-badge {
  font: 600 9px 'DM Mono', monospace; letter-spacing: 1.2px;
  text-transform: uppercase; color: #8a8f98;
  border: 1px solid var(--nova-line, #262626);
  border-radius: 999px; padding: 3px 9px;
}
.mc-console-body {
  height: 380px; overflow-y: auto; padding: 12px 14px;
  /* Keep the wheel inside the console. Without this the browser chains the
     scroll to the page as soon as the feed hits an edge -- and since the feed
     sits pinned at the bottom, almost every scroll hits an edge immediately,
     sliding the console out from under the cursor instead of scrolling it. */
  overscroll-behavior: contain;
  font: 400 12px/1.65 'DM Mono', ui-monospace, monospace;
  color: #c3c8d0;
  scrollbar-width: thin;
}
.mc-console-body::-webkit-scrollbar { width: 8px }
.mc-console-body::-webkit-scrollbar-thumb {
  background: #2a2a2c; border-radius: 4px;
}
.mc-line { white-space: pre-wrap; word-break: break-word; padding: 1px 0 }
.mc-line .t { color: #5a6068 }                   /* timestamp */
.mc-line.is-chat   { color: #86efac }
.mc-line.is-join   { color: #93c5fd }
.mc-line.is-leave  { color: #7a828c }
.mc-line.is-award  { color: #fcd34d }
.mc-line.is-warn   { color: #fbbf24 }
.mc-line.is-error  { color: #fca5a5 }
.mc-line.is-system { color: #6b7280; font-style: italic }

.mc-live-note {
  margin-top: 12px;
  font: 500 11px/1.6 'DM Mono', monospace;
  color: var(--nova-muted, #8a8f98);
}

@media (max-width: 600px) {
  .mc-console-body { height: 300px; font-size: 11px }
}

/* Compact layout ------------------------------------------------------
   The section inherits the site's hero heading scale (62px) and a 90px
   bottom pad, which pushed the console off screen. These bring the whole
   block under one viewport so the roster and the log are visible together.
   Selectors carry an extra class so they outrank the page's own h2 rule
   rather than relying on source order. */
.section.root-subpage.mc-live { padding-top: 10px !important; padding-bottom: 30px !important }
.mc-live .section-copy { max-width: 760px }
.mc-live .section-copy h2 {
  font-size: clamp(22px, 2.6vw, 30px) !important;
  letter-spacing: -1px !important;
  line-height: 1.12 !important;
  margin: 6px 0 8px !important;
}
.mc-live .section-copy p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.mc-live .mc-live-head { margin: 18px 0 12px !important }
.mc-live .mc-roster { margin: 0 0 14px }
.mc-live .mc-console-body { height: 300px }
.mc-live .mc-live-note { margin-top: 10px; font-size: 10px }

@media (max-width: 700px) {
  .mc-live .mc-console-body { height: 260px }
}

/* Fit hero + live panel in the first screen ---------------------------
   Measured at 1920x940: nav 64 + hero 482 + live 619 put the console's
   bottom edge 196px below the fold. The hero was the bulk of it -- an 88px
   h1 running to three lines (259px on its own). Scoped to .mc-hero so only
   this page's hero shrinks; the other sub-pages keep the full scale. */
.hero.mc-hero-compact { padding-top: 14px !important; padding-bottom: 16px !important }
.hero.mc-hero-compact h1 {
  font-size: clamp(32px, 4.6vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -2px !important;
  margin: 12px 0 10px !important;
}
.hero.mc-hero-compact p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}
.section.root-subpage.mc-live { padding-top: 4px !important }
.mc-live .section-copy h2 { margin: 4px 0 6px !important }
.mc-live .mc-live-head { margin: 14px 0 10px !important }
.mc-live .mc-console-body { height: 260px }

/* Status strip and roster now sit under the console, so the spacing flips:
   room above them, none below (the read-only note follows immediately). */
.mc-live .mc-console + .mc-live-head { margin: 16px 0 10px !important }
.mc-live .mc-roster { margin: 0 !important }

/* Removing the two cards left <main> at 900px against a 940px viewport, so
   the footer's darker band showed as a strip above the fold. min-height on
   main pushes the footer to the fold on any screen height, rather than
   padding tuned to one particular viewport. */
.mc-site main { min-height: 100vh }

/* Skin faces in the roster. image-rendering:pixelated is essential -- these
   are 8x8 source pixels scaled up, and smooth interpolation turns a face into
   a smudge. */
.mc-player img.mc-face {
  width: 18px; height: 18px; border-radius: 3px;
  image-rendering: pixelated; image-rendering: crisp-edges;
  flex: 0 0 auto; display: block; background: #202024;
}
.mc-player { padding-left: 6px }

/* Square the player chips to 4px, matching the VPN panel's corner radius
   rather than the pill shape. The face inside drops to 2px so the inner
   curve reads as concentric with the outer one instead of fighting it. */
.mc-player { border-radius: 4px !important }
.mc-player img.mc-face { border-radius: 2px !important }

/* READ ONLY badge squared to match the chips and the VPN panel. */
.mc-console-badge { border-radius: 4px !important }

/* Hero eyebrow squared to match. This stylesheet only loads on the Minecraft
   pages, so the main site's eyebrows keep their pill shape. */
.mc-site .eyebrow { border-radius: 4px !important }

/* Footer status badge squared to match the rest. */
.mc-site .footer-badge { border-radius: 4px !important }

/* Keep the log monospace in every language ---------------------------
   mc-theme.css applies a script font to everything with
   html[lang="bn"] body * (and the same for hi/ru). The console is server
   output -- always Latin -- so a proportional Bengali face makes the columns
   ragged and unreadable.

   Scoped as html[lang] rather than per-language: two classes beat that rule's
   one, so it wins on specificity, and it keeps working for any locale added
   later without another patch.

   Deliberately NOT included: .mc-console-title, .mc-console-badge and
   .mc-live-note, which ARE translated and need the script font. */
html[lang] .mc-console-body,
html[lang] .mc-console-body *,
html[lang] .mc-player,
html[lang] .mc-live-state,
html[lang] .mc-live-meta {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Bengali: Latin stays Latin, Bengali stays Siliguri --------------------
   mc-theme.css sets html[lang="bn"] body * to 'Hind Siliguri' FIRST, so Latin
   characters ("SMP", "Technoz Network", "Purpur 26.2") were drawn with
   Siliguri's own Latin glyphs instead of the site's faces.

   Font fallback resolves per glyph, so the fix is ordering, not exclusion:
   put Inter/Poppins first and Hind Siliguri straight after. Latin picks the
   Latin face; Bengali finds nothing for its codepoints there and falls
   through to Siliguri exactly as before.

   body.mc-site adds a class over their body-only selector, so this wins on
   specificity rather than on source order. */
html[lang="bn"] body.mc-site,
html[lang="bn"] body.mc-site * {
  font-family: Inter, 'Hind Siliguri', Manrope, Arial, sans-serif !important;
}
html[lang="bn"] body.mc-site h1,
html[lang="bn"] body.mc-site h2,
html[lang="bn"] body.mc-site h3,
html[lang="bn"] body.mc-site .brand-name,
html[lang="bn"] body.mc-site .footer-brand-name {
  font-family: Poppins, 'Hind Siliguri', Manrope, Arial, sans-serif !important;
}

/* Re-assert the console monospace ABOVE the rule just added: that one is
   (0,2,2) and would otherwise recapture the log, so this needs a third class
   to stay ahead of it. */
html[lang] body.mc-site .mc-console-body,
html[lang] body.mc-site .mc-console-body *,
html[lang] body.mc-site .mc-player,
html[lang] body.mc-site .mc-live-state,
html[lang] body.mc-site .mc-live-meta {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Network page cards: wider, so shorter --------------------------------
   At 900px the pair ran 335px tall and overflowed the fold by 99px. Widening
   the grid is what actually shortens them -- the same copy over a wider
   measure needs fewer lines -- with tighter padding and leading doing the
   rest. */
.mc-site .cards.mc-cards {
  max-width: 1240px !important;
  gap: 20px !important;
  margin-left: auto; margin-right: auto;
}
.mc-site .cards.mc-cards .card { padding: 22px 26px !important }
.mc-site .cards.mc-cards .card h3 {
  font-size: 20px !important;
  margin: 6px 0 8px !important;
}
.mc-site .cards.mc-cards .card p {
  font-size: 14px !important;
  line-height: 1.58 !important;
  margin: 0 !important;
}
.mc-site .cards.mc-cards .card .card-icon {
  font-size: 20px !important;
  margin-bottom: 10px !important;
}
.mc-site .cards.mc-cards .card .tag { font-size: 10px !important }

/* mc-base.css pins .card to min-height:335px, so the box could not shrink
   however much the contents were tightened -- releasing the floor is what
   actually makes these cards shorter. */
.mc-site .cards.mc-cards .card { min-height: 0 !important }
.mc-site .cards.mc-cards .card p { max-width: none !important }

/* The regions block above the cards carries 90px of bottom padding, which
   left the pair clearing the fold by only 3px. Trimming it there is the
   right place -- shrinking the cards further would start costing legibility. */
.mc-site .mc-regions-wrap { padding-bottom: 34px !important }

/* Console page wallpaper ------------------------------------------------
   A 100vh band at the top of the document, scrolling away with the page.

   On .mc-hero-compact::before rather than body::before for two reasons:
   mc-theme.css disables body pseudo-elements, and mc.js swaps #pageContent
   without touching <body>, so a body-level hook would follow the visitor to
   Store, Network and Join. This element exists only on this page and the
   router takes it away on navigation.

   display:block is explicit because a bare pseudo-element defaults to inline
   and would ignore the height. Width comes from media queries -- image-set()
   selects on pixel density only. */
.mc-site .mc-hero-compact::before{
  /* Full-bleed: #pageContent is position:relative, so it is the containing
     block here and left:0/right:0 would only span the 1208px content column,
     leaving dark edges. Centering a 100vw band escapes that column. body has
     overflow-x:hidden, so 100vw adds no horizontal scrollbar. */
  /* --mc-band-offset is how far #pageContent sits below the document top:
     28px of main padding plus the 64px nav. Because #pageContent is the
     containing block, top:0 would start the band under the header and leave
     a dark strip there. Pull it up by that offset and add the same amount to
     the height, so the band still ends exactly at 100vh from the page top. */
  --mc-band-offset:92px;
  content:"";display:block;position:absolute;top:calc(-1 * var(--mc-band-offset));left:50%;right:auto;
  width:100vw;transform:translateX(-50%);height:100vh;
  /* -1, not 0: this pseudo-element sits inside the stacking context created
     by #pageContent, and at z-index 0 it painted OVER the hero static-flow
     text. Negative keeps it behind the page content while still inside that
     context, so it cannot escape behind the body background either. */
  z-index:-1;pointer-events:none;background-repeat:no-repeat;
  background-size:cover,cover;background-position:center,center 42%;
  background-image:linear-gradient(180deg,rgba(31,31,31,.80) 0%,rgba(31,31,31,.72) 32%,rgba(31,31,31,.88) 58%,rgb(31,31,31) 76%),image-set(url("/minecraft/wall-1280.webp") type("image/webp"),url("/minecraft/wall-1280.jpg") type("image/jpeg"));
}
@media(min-width:1281px){.mc-site .mc-hero-compact::before{background-image:linear-gradient(180deg,rgba(31,31,31,.80) 0%,rgba(31,31,31,.72) 32%,rgba(31,31,31,.88) 58%,rgb(31,31,31) 76%),image-set(url("/minecraft/wall-1920.webp") type("image/webp"),url("/minecraft/wall-1920.jpg") type("image/jpeg"))}}
@media(min-width:1921px){.mc-site .mc-hero-compact::before{background-image:linear-gradient(180deg,rgba(31,31,31,.80) 0%,rgba(31,31,31,.72) 32%,rgba(31,31,31,.88) 58%,rgb(31,31,31) 76%),image-set(url("/minecraft/wall-2560.webp") type("image/webp"),url("/minecraft/wall-2560.jpg") type("image/jpeg"))}}
@media(min-width:2561px){.mc-site .mc-hero-compact::before{background-image:linear-gradient(180deg,rgba(31,31,31,.80) 0%,rgba(31,31,31,.72) 32%,rgba(31,31,31,.88) 58%,rgb(31,31,31) 76%),image-set(url("/minecraft/wall-3840.webp") type("image/webp"),url("/minecraft/wall-3840.jpg") type("image/jpeg"))}}
/* the page's own content has to sit above the band */
.mc-site #pageContent{position:relative;z-index:1}

/* Footer fades in instead of starting with a hard edge -------------------
   The footer paints rgba(0,0,0,.7), which over the page background makes
   rgb(9,9,9) -- 22 levels darker than the #1f1f1f above it. On desktop the
   wallpaper band happened to end exactly at the footer so the join was
   hidden; on mobile the page is taller, a 126px gap of page background opens
   between them, and that step became a visible black line.

   Fading the footer background in over its first 110px removes the edge
   wherever it lands, so this no longer depends on the band and the footer
   coinciding. */
.mc-site footer.footer-premium {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.7) 110px) !important;
}