/* Styles unique to the standalone Minecraft site.
   Loaded after mc-base.css (site.css) and mc-theme.css (root-retnex.css),
   both of which are this site's own private copies. */

/* ---- Brand: mark this as the Minecraft site, not technoz.org ---- */
.mc-brand-tag{
  margin-left:10px;padding:3px 9px;border-radius:999px;
  font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#e8e8e8;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  white-space:nowrap;
}
@media (max-width:560px){ .mc-brand-tag{display:none} }

/* The brand is a label here, not a link back to the main site. */
.mc-site .nav .brand{cursor:default}

/* ---- Hero ---- */
.mc-site .mc-hero{padding-top:34px}

/* ---- Regions section ---- */
.mc-regions-wrap{text-align:center}
.mc-regions-title{
  margin:0 0 10px;font:700 clamp(26px,3.2vw,38px)/1.15 'Poppins','Inter',system-ui,sans-serif;
  color:#f2f2f2;letter-spacing:-.01em;
}
.mc-regions-copy{
  margin:0 auto 26px;max-width:640px;
  font:400 15px/1.65 'Inter',system-ui,sans-serif;color:rgba(235,235,235,.66);
}
.mc-regions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  max-width:920px;margin:0 auto;
}
.mc-region{
  display:flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:12px;
  background:var(--nova-surface-2,#141414);
  border:1px solid var(--nova-line,rgba(255,255,255,.12));
  font:600 14px/1 'Inter',system-ui,sans-serif;color:#ededed;
  white-space:nowrap;
}
.mc-region i{
  width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:var(--nova-red,#dc2626);box-shadow:0 0 9px rgba(220,38,38,.75);
}
.mc-region b{font-weight:600}
.mc-region small{
  font:400 12px/1 'Inter',system-ui,sans-serif;color:rgba(235,235,235,.5);
  padding-left:9px;margin-left:2px;border-left:1px solid rgba(255,255,255,.14);
}
/* Canton is a route into the same world, not a region of its own. */
.mc-region-proxy{border-style:dashed}
.mc-region-proxy i{background:#e8a33d;box-shadow:0 0 9px rgba(232,163,61,.7)}
.mc-proxy-note{
  margin:18px auto 0;max-width:620px;
  font:400 13px/1.6 'Inter',system-ui,sans-serif;color:rgba(235,235,235,.52);
}

/* ---- Join panel ---- */
.mc-join-wrap{text-align:center}
/* Stays at 14px on the site's own surface. The panel styling on this page
   applies to the copy buttons only. */
.mc-address{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 14px 14px 22px;border-radius:14px;
  background:var(--nova-surface-2,#141414);
  border:1px solid var(--nova-line,rgba(255,255,255,.12));
}
.mc-ip{
  font:600 clamp(20px,3vw,28px)/1 'DM Mono','Inter',ui-monospace,monospace;
  color:#fff;letter-spacing:.01em;
}
/* Panel button geometry. The fill is this site's own -- the panel's
   primary is rgb(235,36,36) -- so only the shape is copied. */
.mc-copy{
  padding:8px 16px;border-radius:4px;cursor:pointer;
  font:600 14px/20px 'Inter',system-ui,sans-serif;letter-spacing:.24px;
  color:#0a0a0a;
  background:#fff;border:1px solid #fff;
  transition:background .18s,color .18s,border-color .18s;
}
.mc-copy:hover{background:#e4e4e4;border-color:#e4e4e4}
.mc-copy.is-copied{background:transparent;color:#4df2a5;border-color:#4df2a5}

/* One entry per region, stacked. Centred like the rest of the panel. */
.mc-join-list{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:26px;
}
.mc-join-region{
  display:block;margin-bottom:10px;
  font:600 11px/1 'DM Mono','Inter',ui-monospace,monospace;
  letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(235,235,235,.55);
}
/* Not live yet. Dashed matches how the network page marks an entry that
   is not a region of its own, and the text is sized down because it is a
   status rather than an address to read off. */
/* Equal-width rows. Shrink-to-fit made each pill the width of its own
   address, so the three read as unrelated controls and the Copy buttons
   never lined up. Capped rather than fixed so a narrow screen still fits;
   the cap clears the longest address at its largest clamp size. */
.mc-join-list > li{width:min(100%,430px)}
.mc-join-list .mc-address{display:flex;width:100%;justify-content:space-between}

.mc-address-soon{border-style:dashed;padding-right:22px}
/* Nothing to put on the right, so the status sits centred instead of
   stranded at the left edge by space-between. */
.mc-join-list .mc-address-soon{justify-content:center}
.mc-address-soon .mc-ip{
  font-size:clamp(15px,2vw,18px);color:rgba(235,235,235,.5);
}

/* ---- Store ---- */
.mc-store-wrap{display:flex;justify-content:center}
.mc-note{
  max-width:620px;padding:34px 36px;border-radius:20px;text-align:center;
  background:linear-gradient(160deg,#181818,#0e0e0e);
  border:1px solid var(--nova-line,rgba(255,255,255,.12));
}
.mc-note-badge{
  display:inline-block;margin-bottom:16px;padding:7px 14px;border-radius:999px;
  font:600 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:#e8a33d;background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.35);
}
.mc-note h3{
  margin:0 0 12px;font:700 clamp(20px,2.4vw,26px)/1.25 'Poppins','Inter',system-ui,sans-serif;
  color:#f2f2f2;letter-spacing:-.01em;
}
.mc-note p{margin:0;font:400 14.5px/1.7 'Inter',system-ui,sans-serif;color:rgba(235,235,235,.66)}
.mc-note-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;text-decoration:none;
  font:600 14px/1 'Inter',system-ui,sans-serif;color:#fff;
}
.mc-note-link span:last-child{color:var(--nova-red,#dc2626);transition:transform .2s}
.mc-note-link:hover span:last-child{transform:translateX(4px)}
@media (max-width:560px){ .mc-note{padding:26px 22px} }

/* Two cards read better centred than stretched across a three-column grid. */
.mc-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-left:auto;margin-right:auto}
@media (max-width:760px){ .mc-cards{grid-template-columns:1fr} }

/* ---- Footer: region names are plain labels here, not links ---- */
.mc-site .footer-col span[data-i18n]{
  display:block;padding:5px 0;
  font:400 14px/1.5 'Inter',system-ui,sans-serif;color:rgba(235,235,235,.6);
}

/* ---- Anchor targets clear the fixed nav when jumped to directly ---- */
.mc-site main section[id]{scroll-margin-top:96px}

@media (max-width:760px){
  .mc-regions{gap:9px}
  .mc-region{padding:9px 15px;font-size:13px}
  .mc-site main section[id]{scroll-margin-top:78px}
}

/* ---------------------------------------------------- ban appeal form
   Kept in the site's own idiom: the same glass panel, the same muted
   greys, accent only on the one action that matters. */
.appeal-form {
  display: flex; flex-direction: column; gap: 22px;
  max-width: 620px; margin: 0 auto;
  padding: 30px 28px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.appeal-field { display: flex; flex-direction: column; gap: 8px; position: relative }
.appeal-label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.appeal-label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .6 }
.appeal-form input,
.appeal-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #f2f2f2; font: inherit; font-size: 14px;
  transition: border-color .18s ease, background .18s ease;
}
.appeal-form textarea { resize: vertical; min-height: 150px; line-height: 1.55 }
.appeal-form input:focus,
.appeal-form textarea:focus {
  outline: none;
  border-color: rgba(226,62,62,.6);
  background: rgba(0,0,0,.5);
}
.appeal-form input:invalid:not(:placeholder-shown),
.appeal-form textarea:invalid:not(:placeholder-shown) { border-color: rgba(226,62,62,.45) }
.appeal-count {
  position: absolute; right: 2px; bottom: -18px;
  font-size: 11px; color: rgba(255,255,255,.35);
  font-variant-numeric: tabular-nums;
}
.appeal-send {
  margin-top: 6px; padding: 13px 20px;
  background: #e23e3e; border: none; border-radius: 8px;
  color: #fff; font: inherit; font-weight: 600; font-size: 14px;
  letter-spacing: .02em; cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
.appeal-send:hover:not(:disabled) { background: #c93636 }
.appeal-send:active:not(:disabled) { transform: translateY(1px) }
.appeal-send:disabled { opacity: .5; cursor: default }
.appeal-status { min-height: 20px; margin: 0; font-size: 13px; color: rgba(255,255,255,.6) }
/* Sent: the fields go, the confirmation stays. Hiding the whole form hid
   the message with it, and moving the message out of the form left it
   aligned to the page instead of the card. */
.appeal-form.sent > *:not(.appeal-status) { display: none }
.appeal-status.ok   { color: #6ee787 }
.appeal-status.bad  { color: #ff8080 }
.appeal-note {
  max-width: 620px; margin: 20px auto 0;
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.45); text-align: center;
}
.appeal-note a { color: rgba(255,255,255,.7) }
@media (max-width: 640px) { .appeal-form { padding: 24px 18px } }

/* ban appeal: account picker ------------------------------------------- */
.appeal-picker { display: flex; flex-direction: column; gap: 8px }
.appeal-loading, .appeal-empty {
  margin: 0; padding: 14px; font-size: 13px;
  color: rgba(255,255,255,.4);
  background: rgba(0,0,0,.25); border-radius: 8px;
}
.appeal-player {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; cursor: pointer; font: inherit;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  transition: border-color .15s ease, background .15s ease;
}
.appeal-player:hover { border-color: rgba(255,255,255,.28) }
.appeal-player.is-picked {
  border-color: #e23e3e;
  background: rgba(226,62,62,.12);
}
.appeal-player-name { color: #f2f2f2; font-size: 14px; font-weight: 600 }
.appeal-player-reason { color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.4 }

/* ban appeal: dropdown -------------------------------------------------- */
.appeal-select {
  width: 100%; box-sizing: border-box;
  padding: 12px 38px 12px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  color: #f2f2f2; font: inherit; font-size: 14px;
  cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.45) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.45) 50%, transparent 50%);
  background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .18s ease;
}
.appeal-select:focus { outline: none; border-color: rgba(226,62,62,.6) }
.appeal-select option { background: #191919; color: #f2f2f2 }
.appeal-select option[disabled] { color: rgba(255,255,255,.35) }
.appeal-field[hidden] { display: none }

/* ban appeal: match the theme's own panels -----------------------------
   The site puts cards DARKER than the page (--nova-surface-2 #141414 on a
   #1f1f1f background). The form was using a translucent white, which lightens
   instead and reads grey. These follow the same convention: panel darker than
   the page, fields darker again, so depth reads downward. */
.appeal-form {
  background: var(--nova-surface-2, #141414);
  border: 1px solid var(--nova-line, rgba(255,255,255,.12));
}
.appeal-form input,
.appeal-form textarea,
.appeal-select {
  background: var(--nova-surface, #000);
  border-color: rgba(255,255,255,.10);
}
.appeal-form input:focus,
.appeal-form textarea:focus,
.appeal-select:focus {
  background: #050505;
  border-color: rgba(220,38,38,.65);
}
.appeal-select option { background: #0d0d0d }
.appeal-loading, .appeal-empty { background: rgba(0,0,0,.5) }

/* ban appeal: the message box is a light writing surface ----------------
   It is the one field people actually compose in, and a long piece of text is
   easier to write and re-read on light than on black. Everything around it
   stays dark, so the eye lands on the box that wants filling in. */
.appeal-form textarea {
  background: #f4f4f5;
  color: #14171a;
  border-color: rgba(255,255,255,.14);
  caret-color: #dc2626;
}
.appeal-form textarea::placeholder { color: #6b7280; opacity: 1 }
.appeal-form textarea:focus {
  background: #fff;
  border-color: rgba(220,38,38,.75);
  box-shadow: 0 0 0 3px rgba(220,38,38,.14);
}
.appeal-form textarea::selection { background: rgba(220,38,38,.28); color: #14171a }

/* ban appeal: give the controls presence -------------------------------
   The dropdown is an input like the message box, so it gets the same light
   surface -- black beside white read as a hole rather than a field.

   The send button was fading the red accent to half opacity when disabled,
   which looks like a broken button rather than one waiting on you. Disabled is
   now a flat neutral that plainly is not ready; enabled is the accent at full
   strength. */
.appeal-select {
  background-color: #f4f4f5;
  color: #14171a;
  border-color: rgba(255,255,255,.14);
  background-image: linear-gradient(45deg, transparent 50%, #14171a 50%),
                    linear-gradient(135deg, #14171a 50%, transparent 50%);
}
.appeal-select:focus {
  background-color: #fff;
  border-color: rgba(220,38,38,.75);
  box-shadow: 0 0 0 3px rgba(220,38,38,.14);
}
.appeal-select option { background: #fff; color: #14171a }
.appeal-select option[disabled] { color: #9aa1a9 }

.appeal-form input {
  background: #f4f4f5;
  color: #14171a;
  border-color: rgba(255,255,255,.14);
}
.appeal-form input::placeholder { color: #6b7280; opacity: 1 }
.appeal-form input:focus {
  background: #fff;
  border-color: rgba(220,38,38,.75);
  box-shadow: 0 0 0 3px rgba(220,38,38,.14);
}

.appeal-send {
  background: #dc2626;
  box-shadow: 0 6px 20px rgba(220,38,38,.28);
  letter-spacing: .03em;
}
.appeal-send:hover:not(:disabled) { background: #ef4444 }
.appeal-send:disabled {
  opacity: 1;                       /* not a faded accent -- a different state */
  background: #232326;
  color: rgba(255,255,255,.38);
  box-shadow: none;
  cursor: not-allowed;
}

/* ban appeal: one self-contained rule for the select ---------------------
   The arrow was two stacked linear-gradients positioned with separate
   background-* longhands. A later rule used the `background` SHORTHAND, which
   silently reset position/size/repeat to their defaults, so both gradients
   tiled across the whole control and drew a large triangle in the middle.

   One chevron, one image, and every background longhand set together here so a
   later shorthand cannot leave it half-configured again. */
.appeal-select {
  background-color: #f4f4f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2314171a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.appeal-select:focus {
  background-color: #fff;
}

/* ban appeal: match the Pterodactyl panel exactly ----------------------
   Values read off https://technoz.org/pterodactyl/auth/login rather than
   guessed, so the two screens read as the same product:

     page        #1f1f1f, flat -- the panel has no card, so neither does this
     label       14px/400 #e2e8f0, sentence case, letter-spacing .24px
     field       #000, 1px rgba(255,255,255,.1), radius 4px, padding 8px 12px
     select      same, padding-right 32px for the arrow
     primary     #eb2424, 14px/600, padding 8px 16px, radius 4px, auto width
     font        Inter (the panel self-hosts it as "Inter Variable";
                 that family name does not exist here, so Inter is
                 named first or the stack falls through to Arial) */
.appeal-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 18px;
  max-width: 420px;
  font-family: Inter, "Inter Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.appeal-form,
.appeal-form input,
.appeal-form textarea,
.appeal-select,
.appeal-send {
  font-family: Inter, "Inter Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .24px;
}
.appeal-label {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .24px;
  color: #e2e8f0;
}
.appeal-label em { opacity: .55 }

.appeal-form input,
.appeal-form textarea,
.appeal-select {
  background: #000;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
}
.appeal-form textarea { min-height: 168px; line-height: 1.6 }
.appeal-form input::placeholder,
.appeal-form textarea::placeholder { color: #64748b; opacity: 1 }
.appeal-form input:focus,
.appeal-form textarea:focus,
.appeal-select:focus {
  background: #000;
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
  outline: none;
}
.appeal-select {
  padding: 8px 32px 8px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23e2e8f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}
.appeal-select option { background: #000; color: #e2e8f0 }

.appeal-send {
  align-self: flex-start;
  width: auto;
  margin-top: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  background: #eb2424;
  color: #eff6ff;
  box-shadow: none;
}
.appeal-send:hover:not(:disabled) { background: #f43f3f }
.appeal-send:disabled {
  background: transparent;
  border: 1px solid #475569;
  color: rgba(248,250,252,.45);
}
.appeal-count { color: #64748b }
.appeal-note { color: #94a3b8; max-width: 420px; text-align: left }

/* ban appeal: the Pterodactyl panel's own tokens ------------------------
   Read from the panel database (settings::nova:colors:*), not guessed and not
   sampled off a screenshot. config/nova.php ships different defaults -- the
   live values are stored in the settings table, which is why the file says
   gray-700 #334155 while the panel renders black.

   Kept as variables so that if the palette is changed in Nova Studio, matching
   this page again is a case of updating these six lines. */
.appeal-form {
  --p-bg:          #1f1f1f;   /* gray-800  page */
  --p-field:       #000000;   /* gray-700  input background */
  --p-text:        #e2e8f0;   /* gray-200  text and labels */
  --p-muted:       #64748b;   /* gray-500  placeholder */
  --p-border-soft: rgba(255,255,255,.1);
  --p-border-hard: #475569;   /* gray-600  secondary button */
  --p-accent:      #eb2424;   /* blue-600, recoloured red in this build */
  --p-on-accent:   #eff6ff;   /* blue-50 */
}
.appeal-form input,
.appeal-form textarea,
.appeal-select {
  background: var(--p-field);
  color: var(--p-text);
  border: 1px solid var(--p-border-soft);
}
.appeal-form input:hover:not(:focus),
.appeal-form textarea:hover:not(:focus),
.appeal-select:hover:not(:focus) { border-color: #94a3b8 }   /* gray-400, the panel's hover */
.appeal-form input::placeholder,
.appeal-form textarea::placeholder { color: var(--p-muted) }
.appeal-label { color: var(--p-text) }
.appeal-send { background: var(--p-accent); color: var(--p-on-accent) }
.appeal-send:disabled { border-color: var(--p-border-hard) }
.appeal-select option { background: var(--p-field); color: var(--p-text) }

/* ban appeal: the panel's exact geometry --------------------------------
   Measured off the login screen rather than approximated:
     field width  287px   (its column is 319px with 16px padding each side)
     field height 38px    (8px padding + 20px line-height + 1px borders)
     label        20px tall, 4px above its field
     field groups 16px apart
     button       36px tall, 8px 16px, width follows its label
     line-height  20px everywhere */
.appeal-form {
  max-width: 287px;
  gap: 16px;
}
.appeal-field { gap: 4px }
.appeal-form input,
.appeal-select {
  height: 38px;
  line-height: 20px;
}
.appeal-form textarea {
  line-height: 20px;
  /* Six rows on the panel's rhythm: 6*20 + 16 padding + 2 border. */
  min-height: 138px;
}
.appeal-label { line-height: 20px; margin-bottom: 0 }
.appeal-send {
  height: 36px;
  padding: 8px 16px;
  line-height: 20px;
}
.appeal-note { max-width: 287px }

/* ban appeal: panel styling, page-appropriate width ---------------------
   The panel's fields are 287px because its login is a narrow centred auth
   card. Copying that number onto a full-width content page made this form
   tiny. What should match the panel is its STYLING -- field height, padding,
   radius, colours, font, rhythm -- not the width of a login column.

   Everything else stays exactly as measured: 38px fields, 8px 12px padding,
   4px radius, 20px line-height, 4px label gap, 16px group gap. */
.appeal-form { max-width: 520px }
.appeal-note { max-width: 520px }
.appeal-form textarea { min-height: 198px }

/* ban appeal: panel-sized headings --------------------------------------
   Measured off the login screen:
     h1  36px / 40px, weight 700, Poppins, #f8fafc
     h2  24px / 32px, weight 700, #cbd5e1
     24px from the subtitle down to the first control

   Scoped to .mc-appeal-page. mc-own.css is loaded by every page, so an
   unscoped .mc-hero rule here would shrink the headings on Overview, Store,
   Network and Join as well. */
.mc-appeal-page .mc-hero { padding: 64px 0 0; text-align: left; margin: 0 }
.mc-appeal-page .mc-hero .eyebrow { margin-bottom: 18px }
.mc-appeal-page .mc-hero h1 {
  font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: normal;
  color: #f8fafc;
  margin: 0;
}
.mc-appeal-page .mc-hero h1 em {
  display: block;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: normal;
}
.mc-appeal-page .mc-hero p {
  font-size: 14px;
  line-height: 20px;
  color: #94a3b8;
  margin: 16px 0 0;
  max-width: 520px;
}
.mc-appeal-page .section.root-subpage { padding: 24px 0 80px }

/* The panel puts 24px between the heading block and the first control, and
   this page had 48. It came from mc-theme.css -- .root-subhero
   padding-bottom 34px and .root-subpage padding-top 14px, both !important,
   which is why the two rules above were being ignored. Kept on one element
   so the gap is a single number rather than a sum. */
.mc-appeal-page .mc-hero { padding-bottom: 24px !important }
.mc-appeal-page .section.root-subpage { padding-top: 0 !important }

/* ban appeal: one column, like the panel --------------------------------
   The heading was left-aligned while the form stayed centred, so the two sat
   in different columns with a gap between them. The panel is a single centred
   column with its contents left-aligned -- heading, fields and note all on the
   same left edge. */
.mc-appeal-page .mc-hero,
.mc-appeal-page .appeal-form,
.mc-appeal-page .appeal-note {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.mc-appeal-page .mc-hero p { margin-left: 0; margin-right: 0 }
.mc-appeal-page .appeal-note { margin-top: 24px }

/* ban appeal: centre the eyebrow pill -----------------------------------
   It reads as a badge rather than as a line of the heading, and the nav pill
   directly above it is centred -- two pill shapes on different alignments
   looked like a mistake. The heading, form and note stay left-aligned in the
   column, which is what the panel does. */
.mc-appeal-page .mc-hero .eyebrow {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.appeal-optional{
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  opacity:.62;
}

/* Google sign-in, matching the panel login exactly. The rendered Google
   button is a cross-origin iframe and cannot be styled, so the page owns
   the control and Google is called from script instead. */
.appeal-google-btn {
  width: 100%; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid #fff; border-radius: 4px;
  color: rgb(248,250,252);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease;
}
/* Not a dimmer grey: on a white outline that would read as the button
   fading on hover. The logo lift is the feedback. */
.appeal-google-btn:hover { border-color: #fff }

/* Two ways in, stacked, same control shape. Discord carries its own brand
   colour on the edge only -- a filled blurple button would outrank Send. */
/* Two buttons side by side, equal halves. flex:1 1 0 rather than width:50%
   so that when only one provider is configured it fills the row instead of
   sitting in half of it. */
.appeal-google {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.appeal-google .appeal-google-btn {
  /* the basis is the wrap point: below this the pair stacks again */
  flex: 1 1 150px;
  width: auto;
  min-width: 0;
}
/* Its own row under both, not a third column. */
.appeal-google .appeal-signed { flex: 1 1 100% }

/* Logo and label as one centred group. The gap and padding are tighter
   than the panel button default so both fit inside a half-width button on
   a phone without the label wrapping. */
.appeal-google .appeal-google-btn { gap: 8px; padding: 8px 12px }
.appeal-btn-logo {
  display: inline-flex; flex: 0 0 auto;
  width: 17px; height: 17px;
  /* GSAP animates this element, so it needs its own compositing box */
  will-change: transform;
}
.appeal-btn-logo svg { width: 100%; height: 100%; display: block }
.appeal-btn-text { white-space: nowrap }
.appeal-discord-btn { border-color: rgb(150,160,247) }
.appeal-discord-btn:hover { border-color: rgb(184,190,255) }
/* hidden until the server says the provider is configured */
.appeal-google-btn[hidden] { display: none }
.appeal-google-btn[disabled] { opacity: .5; cursor: default }

/* "or" between the two ways of giving us an address, ruled on both sides so
   neither reads as the only option. */
.appeal-or { display: flex; align-items: center; margin: -6px 0 }
.appeal-or::before,
.appeal-or::after {
  content: ""; flex: 1 1 auto; border-top: 1px solid rgb(64,64,64);
}
.appeal-or span {
  margin: 0 12px; font-size: 12px; color: rgb(148,163,184);
}

.appeal-signed { margin: 0; font-size: 13px; color: #6ee787 }

/* Signed in: the typed address is redundant, so it stops asking. */
/* Signed in: the divider, the button and the email field all go. Asking
   for an address under "Signed in as <address>" reads as wanting a second
   one. :has() rather than a new id, since the markup is fine as it is. */
.appeal-form.signed .appeal-or,
.appeal-form.signed .appeal-field:has(#appealEmail),
.appeal-form.signed .appeal-google-btn { display: none }


/* The scrollbar overlay is drawn by the site because native bars are hidden
   in mc-base.css. It was pointer-events:none, so it could not be grabbed --
   these rules make it behave like the bar it looks like. */
#custom-scrollbar {
  pointer-events: auto;
  /* A 4px target is not grabbable; widen the hit area, not the thumb. */
  width: 14px; right: 0;
}
#custom-scrollbar-thumb { right: 6px; cursor: grab }
#custom-scrollbar-thumb:active { cursor: grabbing }

/* Stays put while pointed at or dragged, instead of fading mid-drag. */
#custom-scrollbar:hover #custom-scrollbar-thumb,
#custom-scrollbar.dragging #custom-scrollbar-thumb { opacity: 1 }

/* ---- Appeal page wallpaper ----
   First child of #pageContent, so it paints behind everything after it
   without needing a stacking context of its own. Fixed rather than
   absolute so it stays put while the form scrolls. */
.mc-bg, .mc-bg-video, .mc-bg-scrim {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.mc-bg-video {
  /* The source is ultrawide; cover crops the sides rather than
     letterboxing on a normal screen. */
  object-fit: cover;
  /* Poster and first frames are bright; this keeps the page from
     flashing white-ish before the scrim is composited. */
  background: var(--nova-bg);
}
/* The form has to stay readable over a Minecraft cinematic. Heavier at the
   top where the heading sits, and solid toward the footer. */
.mc-bg-scrim {
  background:
    linear-gradient(180deg,
      rgb(31 31 31 / 62%) 0%,
      rgb(31 31 31 / 42%) 45%,
      rgb(31 31 31 / 82%) 100%);
}

/* Without the video the poster carries it, so the page still looks the
   same -- just still. */
@media (prefers-reduced-motion: reduce) {
  .mc-bg-video { animation: none }
}

/* The wallpaper is position:fixed, so it paints in the positioned layer --
   above in-flow content regardless of DOM order. The form fields were only
   surviving because .appeal-field carries position:relative; the hero had
   nothing and was painted straight over. Positioned deliberately now. */
.mc-appeal-page .mc-hero,
.mc-appeal-page .section.root-subpage,
.mc-appeal-page .footer-premium { position: relative; z-index: 1 }