.showcase{background-image:url('concept-clean.png');container-type:inline-size}
.showcase .hotspot{border:0;border-radius:0;transition:none}
.showcase .hotspot:hover{background:none;outline:none}
.showcase .hotspot:focus-visible{background:none;outline:2px solid var(--gold);outline-offset:3px}
.server-status{position:absolute;z-index:4;top:28.6%;right:3.7%;width:20%;padding:clamp(12px,1.55cqw,30px);color:var(--cream);background:linear-gradient(145deg,#231a13,#17120e);border:1px solid #bd9559;outline:1px solid #6c4c2b;outline-offset:3px;box-shadow:0 8px 22px #0007;font-size:clamp(11px,1.05cqw,21px)}
.server-status header{display:flex;justify-content:space-between;align-items:center;gap:5px;padding-bottom:.75em;border-bottom:1px solid #705535}
.server-status h2{margin:0;font-size:1.27em;font-weight:normal}
.connection{display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;color:#d6bfa0}
.connection::before{content:'';display:block;width:.63em;height:.63em;border-radius:50%;background:currentColor}
.connection[data-state="online"]{color:#91e88f}
.connection[data-state="offline"]{color:#f2a094}
.server-status dl{margin:.35em 0 0}
.server-status dl div{display:flex;align-items:baseline;justify-content:space-between;gap:.4em;padding:.57em 0;border-bottom:1px solid #493725}
.server-status dl div:last-child{border-bottom:0;padding-bottom:0}
.server-status dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:900px) and (min-width:751px){.server-status{width:24%;right:3%}}
@media(max-width:750px){
  .showcase{height:690px;background-size:auto 690px}
  .mobile-header{display:flex}
  .server-status{top:auto;bottom:27px;right:16px;left:16px;width:auto;max-width:370px;margin-inline:auto;padding:16px;font-size:14px}
}

.showcase .home{display:grid;place-items:center;color:#fff0cd;font-weight:600;font-size:clamp(12px,1.15cqw,19px);text-decoration:none;text-shadow:0 1px 4px #000}
@media(max-width:750px){.showcase nav{display:none}.mobile-header a{color:inherit;text-decoration:none}}