@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/press-start-2p.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'VT323';
  src: url('fonts/vt323.woff2') format('woff2');
  font-display: block;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #191021;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
}

#stage {
  position: relative;
  line-height: 0;
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #191021;
  outline: none;
}

.noscript {
  color: #ffb453;
  font-size: 24px;
  padding: 2em;
  text-align: center;
  width: 100%;
}

/* ---------- touch controls ---------- */
#ui { position: absolute; inset: 0; pointer-events: none; line-height: normal; }

.touch-zone { position: absolute; pointer-events: auto; }

.tbtn {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 214, 140, .5);
  border-radius: 12px;
  background: rgba(30, 16, 40, .45);
  color: #ffd68c;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.tbtn:active, .tbtn.held { background: rgba(255, 176, 64, .5); color: #fff; }

.tbtn.round { border-radius: 50%; }

#touch-ui { display: none; }
body.touch #touch-ui { display: block; }

/* d-pad */
#dpad {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 150px;
  height: 150px;
  pointer-events: auto;
}
.dbtn {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 214, 140, .5);
  background: rgba(30, 16, 40, .45);
  border-radius: 10px;
}
.dbtn.held { background: rgba(255, 176, 64, .5); }
#d-left  { left: 0;    top: 50px; }
#d-right { left: 100px; top: 50px; }
#d-up    { left: 50px; top: 0; }
#d-down  { left: 50px; top: 100px; }
.dbtn::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
}
#d-left::after  { border: 9px solid transparent; border-right: 12px solid rgba(255,214,140,.8); transform: translateX(-6px); }
#d-right::after { border: 9px solid transparent; border-left: 12px solid rgba(255,214,140,.8); transform: translateX(6px); }
#d-up::after    { border: 9px solid transparent; border-bottom: 12px solid rgba(255,214,140,.8); transform: translateY(-6px); }
#d-down::after  { border: 9px solid transparent; border-top: 12px solid rgba(255,214,140,.8); transform: translateY(6px); }

/* right-side action cluster */
#b-jump   { right: 16px;  bottom: 78px; width: 64px; height: 64px; font-size: 9px; }
#b-act    { right: 92px;  bottom: 24px; width: 56px; height: 56px; font-size: 9px; }
#b-grab   { right: 16px;  bottom: 8px;  width: 56px; height: 56px; font-size: 9px; }
#b-power  { right: 100px; bottom: 92px; width: 48px; height: 48px; font-size: 16px; }

/* top-right small buttons */
#b-todo  { right: 12px; top: 10px; width: 44px; height: 34px; font-size: 8px; }
#b-bag   { right: 64px; top: 10px; width: 44px; height: 34px; font-size: 8px; }
#b-pause { right: 116px; top: 10px; width: 36px; height: 34px; font-size: 8px; }

/* rename input overlay */
#rename-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 15, .75);
  pointer-events: auto;
  z-index: 30;
}
#rename-box {
  background: #2a1a2e;
  border: 3px solid #ffb040;
  border-radius: 6px;
  padding: 22px 26px;
  text-align: center;
  box-shadow: 0 8px 0 rgba(0,0,0,.4);
}
#rename-box h3 {
  font-family: 'Press Start 2P', monospace;
  color: #ffd68c;
  font-size: 11px;
  margin-bottom: 14px;
}
#rename-input {
  font-family: 'VT323', monospace;
  font-size: 26px;
  background: #191021;
  color: #ffe9c9;
  border: 2px solid #9a6cc3;
  border-radius: 4px;
  padding: 4px 10px;
  width: 190px;
  text-align: center;
  outline: none;
  text-transform: uppercase;
}
#rename-input:focus { border-color: #ffb040; }
#rename-box .row { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
#rename-box button {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #2a1a2e;
  background: #ffb040;
  border: 0;
  border-radius: 4px;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #a86414;
}
#rename-box button:active { transform: translateY(2px); box-shadow: 0 1px 0 #a86414; }
#rename-box button.ghost { background: #55446b; color: #d9c7ef; box-shadow: 0 3px 0 #2e2440; }