/* Minelist custom styles — Tailwind handles layout; this covers font + bits utilities can't. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* Official Minecraft Ten (Mojang web-theme-bootstrap, OFL) — self-hosted */
@font-face {
  font-family: 'Minecraft Ten';
  src: url('fonts/Minecraft-Ten.woff2') format('woff2'),
       url('fonts/Minecraft-Ten.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

:root { --line:#d6d3d1; }
/* Noto Sans everywhere; Minecraft Ten only for headings + display elements */
* { font-family:'Noto Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing:0; }
h1, h2, h3, h4, .font-mc, .font-mc *, .bt {
  font-family:'Minecraft Ten', 'Noto Sans', system-ui, sans-serif;
  font-weight:400; letter-spacing:.03em;
}
code, kbd, .ipt, .mono { font-family:'JetBrains Mono', ui-monospace, monospace; letter-spacing:0; }

body { background:#f5f5f4; color:#1c1917; }

/* Mobile safety net: one over-wide child (a long IP, an unbroken server name, a fixed-width
   card) used to push the entire page sideways and leave a horizontal scrollbar on phones. */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video { max-width:100%; }
/* Server names and IPs are user-supplied and can be long single "words" with no break points. */
.font-mc, .ipt, .mono { overflow-wrap:anywhere; }
/* Wide data tables scroll inside their own box instead of stretching the page. */
table { max-width:100%; }

/* light theme: lift cards off the page + make fields readable */
.surface { box-shadow:0 1px 2px rgba(28,25,23,.06), 0 3px 10px rgba(28,25,23,.04); }
html[data-theme="dark"] .surface { box-shadow:0 1px 3px rgba(0,0,0,.35); }
input, textarea, select {
  background:#f5f5f4;
  border-color:#d6d3d1 !important;
}
input::placeholder, textarea::placeholder { color:#a8a29f; }
input:focus, textarea:focus, select:focus { background:#fff; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background:#15161a; border-color:#2a2d35 !important; color:#e7e5e0;
}
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus { background:#101114; }
html[data-theme="dark"] body { background:#15161a; color:#e7e5e0; }
html[data-theme="dark"] .surface { background:#1d1f25 !important; border-color:#2a2d35 !important; }
html[data-theme="dark"] .headbar  { background:#1a1c21 !important; border-color:#2a2d35 !important; }
html[data-theme="dark"] .muted    { color:#9aa0ab !important; }

/* These utility classes are used raw all over the site (not just inside .surface
   cards), so each needs its own dark-mode color — otherwise text goes near-black
   on a dark background and boxes stay light-mode white. */
html[data-theme="dark"] .text-ink      { color:#e7e5e0 !important; }
html[data-theme="dark"] .text-muted    { color:#9aa0ab !important; }
html[data-theme="dark"] .text-mgreend  { color:#9be23f !important; }
html[data-theme="dark"] .bg-card       { background:#1d1f25 !important; }
html[data-theme="dark"] .bg-header     { background:#1a1c21 !important; }
html[data-theme="dark"] .bg-page       { background:#15161a !important; }
html[data-theme="dark"] .bg-rankbox    { background:#24262e !important; }
html[data-theme="dark"] .border-line   { border-color:#2a2d35 !important; }
html[data-theme="dark"] [class~="text-[#57534e]"] { color:#b6bcc6 !important; }
html[data-theme="dark"] [class~="text-[#3f3b36]"] { color:#cbd0d8 !important; }

/* Hero search bar is a deliberately always-white pill over the photo hero —
   exclude it from the dark-mode text/input overrides above. */
html[data-theme="dark"] .hero-search input {
  background:transparent !important; border-color:transparent !important; color:#1c1917 !important;
}
html[data-theme="dark"] .hero-search .text-ink,
html[data-theme="dark"] .hero-search .text-muted { color:#1c1917 !important; }
html[data-theme="dark"] .hero-search a:hover { color:#1c1917 !important; }

/* Hero background: drop img/hero.jpg to replace the dark fallback */
.hero-bg {
  background:#12140f url('../img/hero.jpg') center/cover no-repeat;
}
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,17,12,.35), rgba(15,17,12,.9));
}

/* Server banner: image if present, else gradient + name, else "No Banner" grey */
.banner { position:relative; overflow:hidden; }
.banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.banner .bt {
  position:relative; z-index:1; font-weight:800; letter-spacing:1px; color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.45); font-size:clamp(16px,2.4vw,26px);
}
.banner.nobanner { background:#e7e5e4; }
.banner.nobanner .bt { color:#a8a29f; text-shadow:none; font-size:13px; font-weight:600; }

/* signal bars */
.bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:11px}
.bars i{width:3px;background:#7ccf00;border-radius:1px}
.bars i:nth-child(1){height:35%}.bars i:nth-child(2){height:65%}.bars i:nth-child(3){height:100%}
.bars.off i{background:#c0392b}

/* server-page tabs */
.tab-btn { background:#fff; border:1px solid var(--line); color:#57534e; }
.tab-btn:hover { border-color:#7ccf00; color:#3f6b0d; }
.tab-btn.active { background:linear-gradient(180deg,#8fd53a,#5fa016); border-color:transparent; color:#fff; }
html[data-theme="dark"] .tab-btn { background:#1d1f25; border-color:#2a2d35; color:#b6bcc6; }
html[data-theme="dark"] .tab-btn.active { background:linear-gradient(180deg,#8fd53a,#5fa016); color:#0f1108; }

.range-btn { background:#fff; border:1px solid var(--line); color:#57534e; }
.range-btn:hover { border-color:#7ccf00; color:#3f6b0d; }
.range-btn.active { background:#5fa016; border-color:transparent; color:#fff; }
html[data-theme="dark"] .range-btn { background:#1d1f25; border-color:#2a2d35; color:#b6bcc6; }
html[data-theme="dark"] .range-btn.active { background:#5fa016; color:#0f1108; }
html[data-theme="dark"] .rchart .text-line { color:#3a3d47; }

/* FAQ accordion marker */
details.qa summary{list-style:none;cursor:pointer}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .chev{transition:.2s}
details.qa[open] summary .chev{transform:rotate(180deg)}

/* verified badge tooltip */
.vbadge .vtip{opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.vbadge:hover .vtip,.vbadge:focus-within .vtip{opacity:1;visibility:visible;transform:translateY(0)}
.vbadge .vtip.left-1\/2:not(.translate-y-0){transform:translate(-50%,-4px)}
.vbadge:hover .vtip.left-1\/2{transform:translate(-50%,0)}
/* On phones the badge sits near the right edge, so a 230px tooltip anchored left-0 hangs off the
   screen and widens the whole page. Anchor it right so it opens inward, and cap it to the viewport. */
@media (max-width:640px){
  .vbadge .vtip{width:min(230px,70vw)!important;left:auto!important;right:0!important;transform:translateY(-4px)!important}
  .vbadge:hover .vtip,.vbadge:focus-within .vtip{transform:translateY(0)!important}
}

/* copy toast */
.copied .ipt{color:#fff}
.save.saved{filter:brightness(1.12)}
.save.saved svg{fill:currentColor}

/* full-width toggle (beats Tailwind max-w-6xl via higher specificity) */
body.wide .max-w-6xl{max-width:1500px}