/* Status: the keep at night. One watch-fire per service on the wall, lit while it answers.
   Below it the same services as the game's multiplayer server list, and service changes
   written out the way the game writes chat. */
body { background: #0B1230; color: #C9D5F5; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; image-rendering: pixelated; image-rendering: crisp-edges; }
.wrap { max-width: 860px; }
.bar nav a { color: var(--white); }
:is(h1, h2) { margin: 0; }

.watch { padding-top: 34px; }
.watch h1 { font: 800 clamp(28px, 5.4vw, 44px)/1.1 var(--body); letter-spacing: -.01em; color: var(--white); text-wrap: balance; }
.watch h1[data-state="down"] { color: var(--mc-red); }
.watch h1[data-state="unknown"] { color: var(--mc-grey); }
#checked { margin-top: 8px; font-size: 17px; color: #9AA7CC; }
#wall { display: block; width: 100%; margin-top: 10px; image-rendering: pixelated; image-rendering: crisp-edges; }
.fires { list-style: none; margin: 0; padding: 10px 0 12px; display: flex; background: var(--slate); border-top: 4px solid #5F626B; font: 500 17px/1.25 var(--pixel); text-align: center; }
.fires li { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; color: var(--white); }
.fires span { color: var(--mc-green); }
.fires .down span { color: var(--mc-red); }
.fires .unknown span { color: var(--mc-grey); }

section { margin-top: 56px; }
section.watch { margin-top: 0; }
h2 { font: 700 22px/1.2 var(--body); color: var(--white); margin-bottom: 12px; }

/* ---------- server list ---------- */
.list { background: rgba(0, 0, 0, .5); border-block: 2px solid #5A5F70; padding: 8px; display: grid; gap: 6px; }
.srv { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 6px; border: 2px solid transparent; font: 500 18px/1.3 var(--pixel); color: var(--mc-grey); }
.srv:hover { border-color: #808080; background: rgba(0, 0, 0, .35); }
.srv canvas, .srv img { grid-row: span 3; width: 56px; height: 56px; image-rendering: pixelated; image-rendering: crisp-edges; background: var(--azure); }
.srv .top { display: flex; justify-content: space-between; gap: 12px; color: var(--white); }
.srv .ping { display: flex; align-items: center; gap: 8px; color: var(--mc-grey); white-space: nowrap; }
.srv .where { overflow-wrap: anywhere; }
.srv.down .where { color: var(--mc-red); }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.sig i { width: 3px; background: #555; }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 7px; } .sig i:nth-child(3) { height: 10px; } .sig i:nth-child(4) { height: 13px; } .sig i:nth-child(5) { height: 16px; }
.ok .sig i { background: var(--mc-green); }
.down .sig i { background: var(--mc-red); height: 3px; align-self: center; }
.unknown .sig i { animation: ping 1s steps(1) infinite; }
.unknown .sig i:nth-child(2) { animation-delay: .2s; } .unknown .sig i:nth-child(3) { animation-delay: .4s; } .unknown .sig i:nth-child(4) { animation-delay: .6s; } .unknown .sig i:nth-child(5) { animation-delay: .8s; }
@keyframes ping { 0%, 40% { background: var(--mc-grey); } 41%, 100% { background: #555; } }
.hist { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 400 15px/1.3 var(--body); color: #9AA7CC; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; flex: 1 1 260px; max-width: 420px; }
.h { display: inline-block; height: 12px; background: #3A3F4F; }
.h.ok { background: #3FBF4A; }
.h.down { background: var(--mc-red); }
.key .h { width: 12px; margin: 0 5px 0 12px; vertical-align: -1px; }
.key .h:first-child { margin-left: 0; }
.buttons { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin-inline: auto; }
.key { margin-top: 18px; font-size: 15px; color: #9AA7CC; text-align: center; }
.quiet { font: 500 18px/1.3 var(--pixel); color: var(--mc-grey); }

/* ---------- chat ---------- */
.chat { background: rgba(0, 0, 0, .5); padding: 8px 12px; font: 500 18px/1.45 var(--pixel); color: var(--white); max-height: 300px; overflow-y: auto; }
.chat p { text-shadow: 2px 2px 0 #1a1a1a; overflow-wrap: anywhere; }
.chat time { color: var(--mc-grey); }
.chat .up { color: var(--mc-yellow); }
.chat .dn { color: var(--mc-red); }

.notes p { max-width: 62ch; font-size: 17px; }
.notes p + p { margin-top: 12px; }
.notes a { color: var(--white); }
footer { margin-top: 90px; background: #060A1C; }
footer::before { background: repeating-linear-gradient(90deg, #060A1C 0 24px, transparent 24px 48px); }

@media (max-width: 520px) {
  .fires { font-size: 14px; }
  .srv { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; font-size: 16px; padding: 4px; }
  .srv canvas, .srv img { width: 40px; height: 40px; grid-row: span 2; }
  .hist { grid-column: 1 / -1; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .unknown .sig i { animation: none; } }