/* Same theme as the Mods Hub: Minecrafter (MC Display) for titles, Minecraft Seven (MC Text) for text, game textures
   from /theme/ (stone for buttons, deepslate for card headers), 2 px black frames, nothing rounded. */
@font-face { font-family: "MC Display"; src: url("/theme/mc-display-es.ttf") format("truetype"), url("/theme/mc-display.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MC Text"; src: url("/theme/mc-text.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MC Text"; src: url("/theme/mc-text-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #15181c; --panel: #1e2228; --panel-2: #262b32; --obsidian: #08090c;
  --ink: #e3e7ec; --muted: #9aa4b2; --outline: #000; --light-edge: #e6e9ee;
  --green: #78c850; --gold: #e8b53a; --red: #ff7b72; --blue: #5b85e0; --hover: #fff2a8;
  --frame: inset 1px 1px 0 rgba(255,255,255,.10), inset -1px -1px 0 rgba(0,0,0,.55);
  --bevel: inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(0,0,0,.45);
  --bevel-pressed: inset 2px 2px 0 rgba(0,0,0,.45), inset -2px -2px 0 rgba(255,255,255,.12);
  --shadow: 2px 2px 0 rgba(0,0,0,.55);
  --display: "MC Display", "MC Text", system-ui, sans-serif;
  --text: "MC Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tile: 48px; --tile-chrome: 64px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--text); }
main { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
a { color: var(--hover); }
::selection { background: var(--green); color: #0b0d10; }

.card { background: var(--panel); border: 2px solid var(--outline); box-shadow: var(--frame); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.card.hdr { background: url("/theme/chrome.png") 0 0 / var(--tile-chrome) var(--tile-chrome), #7c7c84; background-blend-mode: multiply, normal; image-rendering: pixelated; padding: 1rem 1.25rem; }
.card.hdr .muted { color: #c9ced6; text-shadow: 1px 1px 0 rgba(0,0,0,.7); }
.brand { display: flex; align-items: center; gap: .9rem; margin: 0; font: 26px/1.1 var(--display); color: #fff; text-shadow: var(--shadow); letter-spacing: .02em; overflow-wrap: anywhere; }
.brand .logo { width: 48px; height: 48px; flex: none; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55)); }
.card > .head { display: flex; align-items: center; gap: .7rem; margin: -1.1rem -1.25rem 1rem; padding: .55rem 1rem; flex-wrap: wrap; row-gap: .4rem;
  background: url("/theme/chrome.png") 0 0 / var(--tile-chrome) var(--tile-chrome), #7c7c84; background-blend-mode: multiply, normal; image-rendering: pixelated;
  border-bottom: 2px solid var(--outline); box-shadow: inset 1px 1px 0 rgba(255,255,255,.10); }
.card > .head h2 { margin: 0; font: 17px/1.2 var(--display); color: #fff; text-shadow: var(--shadow); letter-spacing: .02em; }
.card > .head .spacer { flex: 1; }
.card > .head .muted { color: #c9ced6; text-shadow: 1px 1px 0 rgba(0,0,0,.7); font-size: 14px; }
.ico { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }

.hud { display: flex; align-items: center; gap: 1rem; background: var(--panel-2); border: 2px solid var(--outline); box-shadow: var(--frame); padding: .8rem 1rem; }
/* copper bulb like the Hub: unlit = no data, lit = open, amber = expired, red centre = closed */
.lamp { --bulb: #5c3320; --bulb-rim: #3f2416; width: 64px; height: 64px; flex: none; box-shadow: 0 0 0 2px #000; image-rendering: pixelated; }
.lamp.on { --bulb: #fff1c2; --bulb-rim: #e8a94a; filter: drop-shadow(0 0 10px rgba(255,220,120,.85)); }
.lamp.warn { --bulb: #e8b53a; --bulb-rim: #b8782a; filter: drop-shadow(0 0 6px rgba(232,181,58,.5)); }
.lamp.off { --bulb: #d84a3f; --bulb-rim: #6a2020; }
.ico.lamp { width: 24px; height: 24px; box-shadow: 0 0 0 1px #000; }
.hud .big { font: 32px/1 var(--display); color: #fff; text-shadow: var(--shadow); letter-spacing: .03em; }
.hud .big.on { color: var(--green); } .hud .big.off { color: var(--red); } .hud .big.warn { color: var(--gold); }
.hud .big { text-transform: uppercase; }
.hud .sub { margin-top: .35rem; color: var(--muted); }
.hud .sub b { font: 22px/1 var(--display); color: #fff; text-shadow: var(--shadow); margin-right: .35rem; }
.pill { display: inline-block; padding: .05rem .55rem; font-weight: 700; font-size: 14px; background: var(--panel-2); border: 2px solid var(--outline); box-shadow: var(--frame); vertical-align: middle; }
.pill.bad { color: var(--red); } .pill.warn { color: var(--gold); } .pill.ok { color: var(--green); }
.motd { color: var(--muted); margin-top: .6rem; }

ul.players { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
ul.players li { background: var(--panel-2); border: 2px solid var(--outline); box-shadow: var(--frame); padding: .45rem .6rem; display: flex; align-items: center; gap: .6rem; min-width: 0; }
ul.players li .n { font-weight: 700; line-height: 1.15; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
ul.players li .tags { display: flex; gap: .3rem; flex: none; }
ul.players.members { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
ul.players li.away .face { filter: grayscale(.55) brightness(.72); }
.tag { font-size: 12px; font-weight: 700; padding: 0 .4rem; border: 2px solid var(--outline); box-shadow: var(--frame); background: var(--obsidian); color: var(--muted); line-height: 1.5; }
.tag.ok { color: var(--green); } .tag.gold { color: var(--gold); } .tag.blue { color: #8fb0ff; } .tag.dev { color: #d9a6ff; }
.chip.copy { cursor: pointer; } .chip.copy:hover { border-color: var(--light-edge); color: var(--hover); }
.face { width: 36px; height: 36px; border: 2px solid #000; background: var(--obsidian); flex: none; image-rendering: pixelated; object-fit: cover; box-shadow: inset 1px 1px 0 rgba(255,255,255,.2); }
.face.sm { width: 26px; height: 26px; }
.empty { color: var(--muted); margin-top: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.chip { background: var(--obsidian); border: 2px solid var(--outline); box-shadow: var(--frame); padding: .1rem .6rem; font-size: 14px; }
.chip b { color: var(--muted); font-weight: 400; margin-right: .35rem; }

.list { margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: .6rem; padding: .35rem .2rem; border-bottom: 1px solid rgba(0,0,0,.6); }
.list li:nth-child(odd) { background: rgba(0,0,0,.14); }
.list li:last-child { border-bottom: 0; }
.list .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.list .v { color: var(--muted); font-size: 14px; white-space: nowrap; }
.dot { width: 10px; height: 10px; background: var(--green); border: 1px solid #000; flex: none; box-shadow: 0 0 6px rgba(120,200,80,.7); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } .hud .big { font-size: 26px; } .brand { font-size: 22px; } .card { padding: .9rem 1rem; } .card > .head { margin: -.9rem -1rem 1rem; } }
.muted { color: var(--muted); } .small { font-size: 14px; } .err { color: var(--red); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .25rem; }
.foot .muted { font-size: 14px; }
a.nav, button { display: inline-block; text-decoration: none; font: 16px/1.2 var(--display); letter-spacing: .02em; padding: .5rem 1rem; color: #fff; text-shadow: var(--shadow);
  background: url("/theme/stone.png") 0 0 / var(--tile) var(--tile); border: 2px solid var(--outline); box-shadow: var(--bevel); image-rendering: pixelated; cursor: pointer; white-space: nowrap; }
a.nav { font-size: 14px; padding: .3rem .7rem; }
button.primary { background: url("/theme/start.png") 0 0 / var(--tile) var(--tile), #91bd59; background-blend-mode: multiply, normal; }
a.nav:hover, button:hover { color: var(--hover); border-color: var(--light-edge); filter: brightness(1.14); }
button:active { box-shadow: var(--bevel-pressed); transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
.tip { background: var(--panel); border: 2px solid var(--outline); box-shadow: var(--frame); padding: .7rem .9rem; font-size: 14px; color: var(--muted); margin-top: 1rem; }
.tip b { color: var(--ink); font-weight: 700; }
code { background: var(--obsidian); padding: .1rem .4rem; border: 1px solid #000; font-family: inherit; }

/* player stats page */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid rgba(0,0,0,.6); vertical-align: middle; }
th { color: var(--muted); font-weight: 400; font-size: 14px; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:nth-child(odd) { background: rgba(0,0,0,.14); }
td .who { display: flex; align-items: center; gap: .5rem; min-width: 0; }
td .who .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tabs button { font: 700 14px/1.5 var(--text); padding: .1rem .7rem; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px currentColor; text-shadow: none; color: #fff; }
.tabs button.on { color: var(--hover); box-shadow: inset 0 0 0 2px currentColor; }
@media (max-width: 560px) { th.opt, td.opt { display: none; } }