/* MineVault portal – the start page only (6.91: moved out of pages.css, loaded by index.html after it). */

.server-info { min-width: 0; display: grid; gap: 6px; }
.server-title { font-family: var(--pixel); font-size: 24px; line-height: 1; color: #fff; text-shadow: var(--text-shadow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-motd { color: var(--ink-2); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-address { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-weight: 700; color: var(--gold-2); font-size: 1.05rem; }
/* how it works */
.how-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 8px; padding: 0; list-style: none; counter-reset: how; }
.how-row li { position: relative; padding: 22px 18px 18px; background: rgb(var(--shade-rgb) / 0.38); box-shadow: var(--outline), inset 0 4px 0 var(--how-color, var(--grass)), inset var(--bw) var(--bw) 0 rgb(var(--lite-rgb) / 0.08); counter-increment: how; border-radius: var(--radius); }
.how-row li:nth-child(2) { --how-color: var(--diamond); }
.how-row li:nth-child(3) { --how-color: var(--gold); }
.how-row li:nth-child(4) { --how-color: var(--amethyst); }
.how-row li::before { content: counter(how); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; font-family: var(--pixel); font-size: 24px; line-height: 1; color: #fff; text-shadow: var(--text-shadow); background: var(--how-color, var(--grass)); box-shadow: var(--outline), var(--bevel); border-radius: var(--radius-s); }
.how-row b { display: block; margin-bottom: 4px; font-family: var(--pixel); font-weight: 400; font-size: 16px; color: var(--ink); text-shadow: var(--text-shadow); }
.how-row span { color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 900px) { .how-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .how-row { grid-template-columns: minmax(0, 1fr); } }
/* start page news (6.24) */
.news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.news-title { font-size: 1.1rem; line-height: 1.3; }
.lead-news .news-title { font-size: 1.35rem; }
.news-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }
.home-staff-list { display: flex; flex-wrap: wrap; gap: 6px; }
.home-list { list-style: none; margin: 0; padding: 0; display: grid; }
.home-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); min-width: 0; }
.home-list li:first-child { border-top: 0; }
.home-list a { color: var(--ink); font-weight: 700; }
.home-list a:hover { color: var(--link); }
.home-event { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.home-event b { font-size: 1.15rem; }
.news-cover { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: rgb(var(--shade-rgb) / .4); }
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-date { position: absolute; left: 10px; top: 10px; display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 8px; font-size: .74rem; font-weight: 700; color: #fff; background: rgb(0 0 0 / .6); }
.news-more { width: fit-content; margin-top: 4px; }
.home-countdown { display: flex; gap: 8px; }
.cd-part { display: grid; justify-items: center; min-width: 44px; padding: 6px 4px; border-radius: var(--radius-s); font-size: .7rem; color: var(--ink-3); background: rgb(var(--shade-rgb) / .3); }
.cd-part b { font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-maint { margin: 16px 0 0; text-decoration: none; color: inherit; }
.discord-btn { --btn-bg: #5865f2; background: #5865f2; color: #fff; }
.home-buyers li { display: flex; align-items: center; gap: 10px; }
.section-sub { margin: 6px 0 0; max-width: 58ch; color: var(--ink-3); font-size: .95rem; line-height: 1.45; }
.home-meter { display: block; height: 4px; margin-top: 4px; border-radius: 4px; background: rgb(var(--lite-rgb) / .1); overflow: hidden; }
.home-meter::before { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 55%, #ffffff)); }

/* ================================================================== 6.92 (7.0): the new order of the start page
   live strip → start in three steps → news and the forum with the side column (event, giveaway, update, top players)
   → what we offer → shop beside punishment check and "join the team". Empty parts are hidden; the rest takes the room. */
.hp .join-row li { position: relative; }
.hp .join-row li > span { grid-column: 2; }
.hp .join-row .hp-step-link { grid-column: 2; justify-self: start; margin-top: 10px; }
.hp .join-row li[hidden] { display: none; }
.hp-side { min-width: 0; align-self: start; }
.hp-side > .card { margin: 0; }
.hp .home-community { display: block; }
@media (min-width: 760px) {
  .hp .join-row { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .hp .join-row:has(> li[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp .join-row li:not(:last-child)::after { left: auto; right: -14px; top: 33px; bottom: auto; width: 16px; height: 2px; }
  .hp .join-row li:hover { transform: translateY(-3px); }
  .hp .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .home-bento.hp {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "live live" "start start" "news side" "forum side" "offer offer" "shop split";
    grid-auto-flow: row;
  }
  .home-bento.hp > #home-live:not(#hp-none) { grid-area: live; }
  .home-bento.hp > #join-steps:not(#hp-none) { grid-area: start; }
  .home-bento.hp > #news-section:not(#hp-none) { grid-area: news; }
  .home-bento.hp > #hp-side:not(#hp-none) { grid-area: side; }
  .home-bento.hp > #community-section:not(#hp-none) { grid-area: forum; }
  .home-bento.hp > #offer-section:not(#hp-none) { grid-area: offer; }
  .home-bento.hp > #shop-section:not(#hp-none) { grid-area: shop; }
  .home-bento.hp > .home-split:not(#hp-none) { grid-area: split; }
  /* :not(#hp-none) lifts these above the older :has() rules of 6.39 (two ids) that placed the bento tiles */
  /* nothing in the side column: news and forum take the whole width – and the other way round */
  .home-bento.hp:has(> #hp-side[hidden]) > #news-section:not(#hp-none), .home-bento.hp:has(> #hp-side[hidden]) > #community-section:not(#hp-none) { grid-column: 1 / -1; }
  .home-bento.hp:has(> #news-section[hidden]):has(> #community-section[hidden]) > #hp-side:not(#hp-none) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  /* without the shop the punishment check and "join the team" sit side by side over the whole width */
  .home-bento.hp:has(> #shop-section[hidden]) > .home-split:not(#hp-none) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hp .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-side { position: sticky; top: calc(var(--header-h) + 16px); }
}
@media (prefers-reduced-motion: reduce) { .hp .join-row li:hover { transform: none; } }
/* 7.0: the label of a button inside a step keeps the button's own colour (it took the muted text colour of the step: 3.5:1) */
.how-row .btn span, .join-row .btn span { color: inherit; }

/* ================================================================== 7.8.0: the intro bar and fair play
   What MineVault is and how to get in, in the first screen: on computers the bar overlaps the bottom of the scene
   (index.js and hero3d-loader.js shrink the scene by the part below it), on phones it comes before the scene. */
.hp-intro { position: relative; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px;
  margin-top: -40px; padding: 16px 22px; background: var(--bg-2); border-radius: var(--radius); box-shadow: var(--outline), var(--bevel), var(--shadow-s); }
.container.hp-intro { max-width: 1280px; width: calc(100% - 40px); }
.hp-intro h2 { margin: 0 0 6px; }
.hp-intro p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.hp-intro-join { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hp-intro-join > .server-card { flex: 1 1 auto; }
.hp-intro .server-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 14px; border-radius: var(--radius-s); background: var(--field); box-shadow: var(--outline), var(--sunk); }
.hp-intro .server-icon { flex: none; width: 40px; height: 40px; image-rendering: pixelated; }
.hp-intro .server-info { flex: 1 1 auto; display: block; }
.hp-intro .server-title, .hp-intro .server-motd { display: none; }
.hp-intro .server-address { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; font-size: 1.2rem; color: var(--gold-2); }
.hp-intro .server-address > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 901px) { .hp-intro .server-address > span { flex: none; } }
.hp-intro .server-address .btn { --btn-bg: var(--grass); color: var(--on-accent); flex: none; }
.hp-intro .server-status { flex: none; display: grid; justify-items: end; gap: 2px; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-2); background: none; box-shadow: none; color: var(--ink); }
.hp-intro .server-status .players { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-intro .server-status .state { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); }
.hp-intro .server-status.offline .state { color: var(--bad); }
.hp-intro .server-status .ping { display: none; }
.hp-intro-links { flex: none; display: flex; flex-direction: column; gap: 6px; }
.hp-intro-links .btn { justify-content: center; }
/* the live strip used to overlap the scene – now the intro bar does */
.home-bento.hp > .home-live { margin-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 900px) {
  /* phones: the bar first, the scene below it; a maintenance note stays on top */
  body.home main { display: flex; flex-direction: column; }
  body.home main > * { width: 100%; }
  body.home main > .hp-intro { order: -1; width: calc(100% - 32px); margin: 16px auto 18px; grid-template-columns: minmax(0, 1fr); padding: 16px; }
  body.home main > .container:has(> .home-maint) { order: -2; }
  .hp-intro-join { flex-direction: column; align-items: stretch; }
  .hp-intro-links { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  /* the address gets the whole row, the player count goes below it */
  .hp-intro .server-card { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .hp-intro .server-icon { width: 32px; height: 32px; }
  .hp-intro .server-info { flex-basis: calc(100% - 44px); }
  .hp-intro .server-address { font-size: 1rem; }
  .hp-intro .server-status { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
}

/* fair play: three plain points beside the punishment check */
.hp-fair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px 32px; align-items: start; }
.hp-fair h2 { margin: 0; }
.hp-fair-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.hp-fair-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.hp-fair-points b { display: block; color: var(--ink); }
.hp-fair-points span:not(.hp-fair-ic) { display: block; color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.hp-fair-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-s); color: var(--grass-2); background: rgb(var(--accent2-rgb) / .14); box-shadow: var(--outline); }
.hp-fair-ic .icon { width: 20px; height: 20px; }
.hp-fair .lookup-card h3 { margin-bottom: 4px; }
@media (max-width: 760px) { .hp-fair { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1000px) {
  .home-bento.hp { grid-template-areas: "live live" "start start" "fair fair" "news side" "forum side" "offer offer" "shop split"; }
  .home-bento.hp > #fair-section:not(#hp-none) { grid-area: fair; }
}

/* 7.22.0: the colour icons of the tiles ("What we offer") for the three steps and the fair-play points */
.hp .join-row li:nth-child(1) { --tile: var(--grass); --tile-2: var(--grass-2); --tile-ink: #fff; }
.hp .join-row li:nth-child(2) { --tile: var(--diamond); --tile-2: var(--t-diamond-2); --tile-ink: #0b1430; }
.hp .join-row li:nth-child(3) { --tile: var(--gold); --tile-2: var(--t-gold-2); --tile-ink: var(--c-on-warn); }
.hp .join-row li::before { color: var(--tile-ink, #fff); text-shadow: none; background: linear-gradient(135deg, var(--tile, var(--grass)), var(--tile-2, var(--grass-2))); border-radius: 13px; box-shadow: 0 10px 24px -12px var(--tile, var(--grass)); }
.hp-fair-points li:nth-child(1) { --tile: var(--grass); --tile-2: var(--grass-2); }
.hp-fair-points li:nth-child(2) { --tile: var(--diamond); --tile-2: var(--t-diamond-2); }
.hp-fair-points li:nth-child(3) { --tile: var(--t-amethyst); --tile-2: var(--t-amethyst-2); }
.hp-fair-points .hp-fair-ic { color: #fff; background: linear-gradient(135deg, var(--tile), var(--tile-2)); border-radius: 12px; box-shadow: 0 10px 24px -12px var(--tile); }
.hp-fair-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; }
/* 7.26.0: "For you" – the signed-in player's own things, tiles like "What we offer" */
.hp-foryou { display: grid; gap: 12px; }
.fy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fy-tile { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "i v" "i k" "s s"; column-gap: 14px; row-gap: 2px; padding: 16px; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
a.fy-tile:hover { text-decoration: none; transform: translateY(-2px); }
.fy-tile .offer-icon { grid-area: i; width: 44px; height: 44px; border-radius: 13px; align-self: center; }
.fy-tile .offer-icon .icon { width: 22px; height: 22px; }
.fy-tile.hot { border-bottom-color: var(--tile); }
.fy-v { grid-area: v; font-size: 1.6rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.fy-k { grid-area: k; font-weight: 700; font-size: .88rem; color: var(--ink-2); }
.fy-s, .fy-faces { grid-area: s; margin-top: 8px; }
.fy-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fy-faces { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 640px) { .fy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fy-tile { padding: 12px; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; } .fy-tile .offer-icon { width: 34px; height: 34px; } .fy-v { font-size: 1.25rem; } }