/* FOUNDATION base styles — UI theme lives in css/ui.css (UI-Dev owns that). */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #20223a;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'VT323', monospace;
}
#screen {
  position: fixed; inset: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* boot loader — pure CSS, visible before any JS runs, removed by main.js */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: #20223a;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  transition: opacity .45s steps(6);
}
#loader.done { opacity: 0; pointer-events: none; }
.ldrChar {
  width: 16px; height: 24px;
  background:
    linear-gradient(#241a12 0 5px, #d99e6e 5px 11px, #26406e 11px 17px, #3e5a8c 17px 22px, #fff 22px 24px);
  image-rendering: pixelated;
  transform: scale(3);
  animation: ldrHop .55s steps(2) infinite;
}
@keyframes ldrHop { 0%,100% { transform: scale(3) translateY(0); } 50% { transform: scale(3) translateY(-3px); } }
.ldrBar {
  width: 180px; height: 14px;
  border: 3px solid #f2ead8; background: #1a1c2c;
  box-shadow: 3px 3px 0 #1a1c2c;
}
.ldrBar i {
  display: block; height: 100%; width: 30%;
  background: repeating-linear-gradient(90deg, #f0c040 0 8px, #c08a20 8px 16px);
  animation: ldrFill 1.4s steps(10) infinite;
}
@keyframes ldrFill { from { width: 8%; } to { width: 96%; } }
.ldrTxt {
  font-family: 'Pixelify Sans', 'VT323', monospace;
  color: #f0c040; font-size: 22px; letter-spacing: 2px;
  text-shadow: 2px 2px 0 #1a1c2c;
  animation: ldrBlink 1.1s steps(2) infinite;
}
@keyframes ldrBlink { 50% { opacity: .55; } }
#touchLayer { position: fixed; inset: 0; z-index: 5; }
#ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#ui > * { pointer-events: auto; }

/* virtual joystick + action button (engine-owned DOM, themed in ui.css) */
#joy {
  display: none; position: fixed; z-index: 10; pointer-events: none;
  width: 0; height: 0;
}
#joy .base {
  position: absolute; left: -52px; top: -52px; width: 104px; height: 104px;
  border: 3px solid rgba(242, 234, 216, .5); border-radius: 50%;
  background: rgba(32, 34, 58, .25);
}
#joy .knob {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(242, 234, 216, .75);
  border: 3px solid #20223a;
}
#btnA {
  display: none; position: fixed; z-index: 10;
  right: calc(20px + env(safe-area-inset-right)); bottom: calc(36px + env(safe-area-inset-bottom));
  width: 76px; height: 76px; border-radius: 50%;
  font-family: 'Pixelify Sans', monospace; font-size: 30px; font-weight: 700;
  color: #20223a; background: #f0c040; border: 4px solid #20223a;
  box-shadow: 0 4px 0 #20223a;
}
#btnA.pressed { transform: translateY(3px); box-shadow: 0 1px 0 #20223a; }
body.touch #btnA { display: block; }