/* FREE YOUR MINE - vanilla title screen. Pixel Operator 8 (CC0), no Mojang assets. */
@font-face {
  font-family: "PO8";
  src: url("/assets/po8.woff2?v=__V_PO8__") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PO8";
  src: url("/assets/po8-bold.woff2?v=__V_PO8B__") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  /* entry scale: pixel unit (desktop 2.5, mobile 2.0) */
  --s: 2.5px;
  --panel: rgba(12, 12, 14, 0.86);
  --btn-face: #6e6e6e;
  --btn-top: #a9a9a9;
  --btn-bot: #3f3f45;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PO8", ui-monospace, monospace;
  color: #fff;
  background: #0e0d13;
  overflow: hidden;
  text-shadow: 0.125em 0.125em 0 rgba(0, 0, 0, 0.55);
}
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* background: one random image + light scrim + soft vignette (halved) */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #171224;
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(8, 8, 12, 0.12), rgba(8, 8, 12, 0.12)),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 8, 12, 0.42) 100%);
}
.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}
.bg img.ready { opacity: 1; }

/* screen: vanilla title-screen placement */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18vh;
  gap: 3.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.title-wrap {
  position: relative;
  /* local scrim behind title + entry so the pixel text stays readable */
  background: radial-gradient(90% 130% at 50% 45%, rgba(8, 8, 12, 0.30), transparent 75%);
  padding: 1.5rem 3rem;
  margin: -1.5rem -3rem;
}

/* stone title: bevelled extrusion via stacked shadows + gradient letters */
.title-logo {
  font: inherit;
  font-family: "PO8", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 5.2rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: transparent;
  background: linear-gradient(180deg, #eceff3 0%, #c3c8d1 38%, #9aa0ac 52%, #d6dae1 78%, #b9bec8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-shadow:
    2px 2px 0 #6d7178, 4px 4px 0 #5c6067, 6px 6px 0 #4b4e55,
    8px 8px 0 #3a3d43, 10px 10px 0 #2a2c31, 12px 12px 18px rgba(0, 0, 0, 0.55);
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.title-logo:hover { transform: scale(1.02); }
.title-logo:active { transform: scale(0.99); }

/* splash */
.splash {
  position: absolute;
  right: 0;
  top: -1.1em;
  color: #ffff00;
  font-size: clamp(0.72rem, 1.7vw, 1.15rem);
  transform: rotate(-14deg);
  text-shadow: 0.125em 0.125em 0 #3f3f00;
  pointer-events: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .splash { animation: splash-pulse 900ms ease-in-out infinite alternate; }
  @keyframes splash-pulse { from { transform: rotate(-14deg) scale(1); } to { transform: rotate(-14deg) scale(1.07); } }
}

/* server entry: vanilla proportions, 1.2-1.3x scaled via --s */
.entry {
  position: relative;
  display: flex;
  align-items: stretch;
  width: calc(440px * var(--s) / 2.5);
  min-height: calc(84px * var(--s) / 2.5);
  background: rgba(10, 10, 12, 0.74);
  border: calc(var(--s) * 0.8) solid #000;
  outline: calc(var(--s) * 0.8) solid #565660;
  color: #fff;
  text-align: left;
}
.entry-hit {
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 3.4);
  padding: calc(var(--s) * 2) calc(var(--s) * 2.6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.entry:hover .entry-hit, .entry-hit:focus-visible { background: rgba(126, 136, 191, 0.24); }
.entry-icon {
  width: calc(var(--s) * 32);
  height: calc(var(--s) * 32);
  flex: none;
  border: 1px solid #000;
}
.entry-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) * 1.4);
  min-width: 0;
  justify-content: center;
}
.entry-motd {
  font-size: calc(var(--s) * 8);
  white-space: nowrap;
}
.entry-sub {
  font-size: calc(var(--s) * 7);
  white-space: nowrap;
}

/* right column: players count + ping bars (the stats hotspot) */
.hotspot {
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: calc(var(--s) * 1.6);
  padding: calc(var(--s) * 1.6) calc(var(--s) * 2.2);
  margin: 0;
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.hotspot:hover, .hotspot:focus-visible { background: rgba(126, 136, 191, 0.28); }
.hotspot::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + var(--s) * 2);
  right: calc(var(--s) * 2);
  background: rgba(16, 0, 16, 0.94);
  border: 2px solid #2a0a56;
  outline: 1px solid #100010;
  padding: 0.3rem 0.6rem;
  font-size: calc(var(--s) * 6.4);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
  z-index: 6;
  text-shadow: 0.125em 0.125em 0 rgba(0, 0, 0, 0.55);
}
.hotspot:hover::after, .hotspot:focus-visible::after { opacity: 1; }
.players { font-size: calc(var(--s) * 7); }
.mc-8 { color: #4c4c54; text-shadow: none; }
.bars { display: inline-flex; align-items: flex-end; gap: calc(var(--s) * 0.8); height: calc(var(--s) * 5); }
.bars i { width: calc(var(--s) * 1.2); background: #4c4c54; }
.bars i:nth-child(1) { height: calc(var(--s) * 1.6); }
.bars i:nth-child(2) { height: calc(var(--s) * 2.4); }
.bars i:nth-child(3) { height: calc(var(--s) * 3.2); }
.bars i:nth-child(4) { height: calc(var(--s) * 4); }
.bars i:nth-child(5) { height: calc(var(--s) * 4.8); }
.bars[data-level="5"] i { background: #54c46a; }

/* vanilla color codes: color + darker same-hue shadow (vanilla behavior) */
.mc-0 { color: #000000; text-shadow: none; }
.mc-1 { color: #0000aa; text-shadow: 0.125em 0.125em 0 #00002a; }
.mc-2 { color: #00aa00; text-shadow: 0.125em 0.125em 0 #002a00; }
.mc-3 { color: #00aaaa; text-shadow: 0.125em 0.125em 0 #002a2a; }
.mc-4 { color: #aa0000; text-shadow: 0.125em 0.125em 0 #2a0000; }
.mc-5 { color: #aa00aa; text-shadow: 0.125em 0.125em 0 #2a002a; }
.mc-6 { color: #ffaa00; text-shadow: 0.125em 0.125em 0 #3f2a00; }
.mc-7 { color: #aaaaaa; text-shadow: 0.125em 0.125em 0 #2a2a2a; }
.mc-8 { color: #555555; text-shadow: 0.125em 0.125em 0 #151515; }
.mc-9 { color: #5555ff; text-shadow: 0.125em 0.125em 0 #15153f; }
.mc-a { color: #55ff55; text-shadow: 0.125em 0.125em 0 #153f15; }
.mc-b { color: #55ffff; text-shadow: 0.125em 0.125em 0 #153f3f; }
.mc-c { color: #ff5555; text-shadow: 0.125em 0.125em 0 #3f1515; }
.mc-d { color: #ff55ff; text-shadow: 0.125em 0.125em 0 #3f153f; }
.mc-e { color: #ffff55; text-shadow: 0.125em 0.125em 0 #3f3f15; }
.mc-f { color: #ffffff; text-shadow: 0.125em 0.125em 0 #3f3f3f; }

/* vanilla grey bevel button */
.mc-btn {
  font: inherit;
  font-size: calc(var(--s) * 7);
  color: #fff;
  background: var(--btn-face);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 var(--btn-top), inset -2px -2px 0 var(--btn-bot);
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.mc-btn:hover { filter: brightness(1.18); }
.mc-btn:active { box-shadow: inset 2px 2px 0 var(--btn-bot), inset -2px -2px 0 var(--btn-top); }

/* advancement toast */
.adv-toast {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #212121;
  border: 2px solid #000;
  outline: 2px solid #55555a;
  padding: 0.55rem 0.9rem;
  transform: translateX(calc(100% + 2rem));
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  font-size: calc(var(--s) * 7);
}
.adv-toast.show { transform: none; }
.adv-toast img { width: calc(var(--s) * 12.8); height: calc(var(--s) * 12.8); flex: none; }
.adv-text { display: flex; flex-direction: column; gap: 0.2rem; }
.adv-title { color: #ffff55; }
.adv-name { color: #ffffff; }

/* celebration particles */
.particle {
  position: fixed;
  width: 5px;
  height: 5px;
  background: #f2b63c;
  z-index: 19;
  pointer-events: none;
  text-shadow: none;
}

/* statistics overlay: lightened (vanilla pause feel) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(6, 6, 8, 0.36);
  padding: 1rem;
}
.menu[hidden] { display: none; }
.menu-panel {
  width: min(94vw, 40rem);
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: rgba(12, 12, 14, 0.86);
  border: 2px solid #000;
  outline: 2px solid #565660;
  padding: 1rem;
  gap: 0.9rem;
  text-shadow: 0.125em 0.125em 0 rgba(0, 0, 0, 0.55);
}
.menu-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.menu-title { font-size: calc(var(--s) * 8); }
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tab[aria-selected="true"] { background: #4a4a52; }
.menu-body { overflow-y: auto; min-height: 12rem; }
.pane table { width: 100%; border-collapse: collapse; font-size: calc(var(--s) * 6.8); }
.pane th, .pane td { text-align: left; padding: 0.35rem 0.5rem; }
.pane tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.pane th { color: #aaa; font-weight: normal; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.2rem; font-size: calc(var(--s) * 7.2); }
.stat-grid b { color: #f2b63c; font-weight: normal; }
.stat-grid span { color: #aaa; }
.avatar {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  background: conic-gradient(from 0deg, var(--c1) 0 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.45rem;
  border: 1px solid #000;
}
.log-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; font-size: calc(var(--s) * 6.8); }
.log-list li {
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid #565660;
  padding: 0.3rem 0.6rem;
  overflow-wrap: anywhere;
}
.log-list .t { color: #aaa; margin-right: 0.5rem; font-size: calc(var(--s) * 6); }
.log-list.join { border-left-color: #54c46a; }
.log-list.death { border-left-color: #e05d4f; }
.log-list.advancement { border-left-color: #f2b63c; }
.empty { color: #aaa; font-size: calc(var(--s) * 6.8); padding: 1.2rem 0.4rem; }

.visually-hidden { position: fixed; left: -9999px; }
@media (max-width: 37.5rem) {
  :root { --s: 1.8px; }
  .entry { width: calc(100vw - 2rem); max-width: 100%; }
  .entry-motd, .entry-sub { white-space: nowrap; }
  .title-logo { font-size: clamp(1.5rem, 6.6vw, 2.6rem); }
  .splash { right: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}