/* Shared look for login and menu: a blocky, pixel-scaled UI.
   --s is the GUI scale (CSS px per GUI pixel), set by mc.js. */
:root { --s: 2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body { font: 16px/1.3 ui-monospace, monospace; color: #fff; user-select: none; -webkit-user-select: none; }
canvas, .px { image-rendering: pixelated; image-rendering: crisp-edges; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- panorama ---------- */
.pano { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(#78a7ff 0%, #a9c8ff 55%, #cfe0ff 100%); }
.pano .layer {
  position: absolute; left: 0; right: 0; bottom: 0;
  background-repeat: repeat-x; background-position: 0 100%;
  image-rendering: pixelated;
  filter: blur(calc(var(--s) * 1.4px));
  will-change: background-position;
}
.pano .clouds { position: absolute; inset: 0 0 auto 0; height: 40%; filter: blur(calc(var(--s) * 1.2px)); }
.pano .cloud { position: absolute; background: #fff; opacity: .9; box-shadow: 0 calc(var(--s) * 6px) 0 #e8edf6; }
.pano::after {
  /* the menu's two overlays: white fading down, black fading in */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)),
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
}

/* ---------- dirt "options" background ---------- */
.dirt {
  position: fixed; inset: 0; z-index: 20; display: none;
  background-image: var(--dirt-dark);
  background-size: calc(var(--s) * 32px) calc(var(--s) * 32px);
  image-rendering: pixelated;
}
.dirt.on { display: block; }

/* ---------- absolutely laid out GUI ---------- */
.gui { position: fixed; inset: 0; z-index: 2; }
.gui > * { position: absolute; }
.center-x { left: 50%; transform: translateX(-50%); }

/* ---------- pixel text ---------- */
mc-text {
  display: inline-block; position: relative; line-height: 0; vertical-align: top;
  color: #fff; --shadow: #3f3f3f;
  filter: drop-shadow(calc(var(--s) * 1px) calc(var(--s) * 1px) 0 var(--shadow));
}
mc-text.flat { filter: none; }
mc-text > .g {
  display: block; background: currentColor;
  -webkit-mask: var(--m) no-repeat 0 0 / 100% 100%;
          mask: var(--m) no-repeat 0 0 / 100% 100%;
}
mc-text.gray   { color: #a0a0a0; --shadow: #282828; }
mc-text.yellow { color: #ffff00; --shadow: #3f3f00; }
mc-text.red    { color: #ff5555; --shadow: #3f1515; }
mc-text.green  { color: #55ff55; --shadow: #153f15; }

/* ---------- buttons ---------- */
.mc-btn {
  display: grid; place-items: center; padding: 0; margin: 0; border: 0; cursor: pointer;
  height: calc(var(--s) * 20px);
  background: var(--t0) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  color: #e0e0e0; outline: none;
}
.mc-btn mc-text { color: inherit; }
.mc-btn:hover, .mc-btn:focus-visible { background-image: var(--t1); color: #ffffa0; }
.mc-btn:hover mc-text, .mc-btn:focus-visible mc-text { --shadow: #3f3f28; }
.mc-btn:disabled { background-image: var(--t2); color: #a0a0a0; cursor: default; }
.mc-btn:disabled mc-text { --shadow: #282828; }

/* ---------- text field ---------- */
.mc-field {
  height: calc(var(--s) * 20px);
  background: #000; border: calc(var(--s) * 1px) solid #a0a0a0;
  display: flex; align-items: center; padding-left: calc(var(--s) * 4px);
  cursor: text; overflow: hidden;
}
.mc-field.focus { border-color: #fff; }
.mc-field input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0;
  font-size: 16px; /* avoids iOS zoom */
}
.mc-field mc-text { color: #e0e0e0; }

/* ---------- logo + splash ---------- */
.logo { display: block; }
.splash {
  --k: 1.6;
  translate: -50% -50%; rotate: -20deg; scale: var(--k);
  animation: splash .5s ease-in-out infinite alternate;
}
@keyframes splash { from { scale: var(--k); } to { scale: calc(var(--k) * 0.93); } }

/* ---------- loading bar ---------- */
.bar { height: calc(var(--s) * 2px); background: #808080; }
.bar > i { display: block; height: 100%; width: 0; background: #80ff80; }

@media (prefers-reduced-motion: reduce) {
  .splash { animation: none; }
}