/* The title screen (logo, main menu, server status), the grass strip under it, and the footer. */
/* ---------- title screen */
.hero{text-align:center;padding-bottom:92px}
.logo{margin:0;display:inline-flex;align-items:center;gap:.08em;font:700 clamp(46px,10.5vw,98px)/1.05 var(--px);letter-spacing:.03em;animation:float 4.5s ease-in-out infinite}
.logo .tex{display:inline-block;color:#7fdc6a;filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000) drop-shadow(5px 6px 0 rgba(0,0,0,.45))}
.logo .tex.gold{color:var(--gold)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .logo .tex.ready{color:transparent;-webkit-background-clip:text;background-clip:text;background-size:auto 100%;background-repeat:repeat-x;image-rendering:pixelated}
}
.logo .orb{width:.52em;height:.52em;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5));animation:bob 2.4s steps(6) infinite}
@keyframes float{50%{transform:translateY(-6px) rotate(-.5deg)}}
@keyframes bob{50%{transform:translateY(.1em)}}
.tag{font:600 clamp(17px,2.6vw,22px)/1.3 var(--px);color:#fff;text-shadow:var(--ol);margin:12px 0 8px}
.mainmenu{display:grid;justify-items:center;margin:6px 0 16px}
.mainmenu button{background:none;border:0;padding:2px 14px;font:700 clamp(25px,4.6vw,36px)/1.22 var(--px);color:#e9ecff;text-shadow:var(--ol);cursor:inherit;transition:transform .08s,color .08s}
.mainmenu button:hover,.mainmenu button:focus-visible{color:var(--gold);transform:scale(1.14);outline:none}
.status{display:inline-flex;align-items:center;gap:10px;font:600 16px var(--px);text-shadow:var(--ol1);padding:5px 12px;background:rgba(5,8,24,.45);border-radius:8px;max-width:100%}
.dot{width:10px;height:10px;flex:none;background:#777;box-shadow:0 0 0 2px #000}
.dot.on{background:var(--grass);animation:pulse 1.6s steps(2) infinite}
.dot.off{background:var(--red)}
@keyframes pulse{50%{box-shadow:0 0 0 2px #000,0 0 10px var(--grass)}}
#surface{position:relative;height:150px;margin-bottom:30px}
.dighint{position:absolute;left:0;right:0;top:62px;text-align:center;font:600 14px var(--px);color:#ffe7b0;text-shadow:var(--ol1);transition:opacity 1.2s;pointer-events:none}
.dighint.gone{opacity:0}

footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;color:#fff;font:600 14px var(--px);text-shadow:var(--ol1);margin-top:30px}
#adminForm{display:flex;gap:8px}
#adminForm input{width:220px;max-width:60vw}