/* NoBaiLa Kindom - HTML5 shell styles.
   Canvas renders at a fixed logical 960x540 resolution and is scaled by JS
   to fit the viewport while preserving the 16:9 aspect ratio (letterboxed). */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
#wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#game {
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: none;            /* game draws its own software cursor */
  box-shadow: 0 0 24px rgba(120,160,255,0.25);
}
#hint {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: #88a;
  font-size: 12px;
  margin: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* ===== Touch virtual controller (retro pixel style) ===== */
#touch-ctrl{
  --tc-cell: clamp(46px, 13.5vmin, 82px);
  display:none; position:fixed; left:0; right:0; bottom:0;
  justify-content:space-between; align-items:flex-end;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  pointer-events:none; z-index:40;
  font-family:"Courier New", monospace;
  -webkit-user-select:none; user-select:none; touch-action:none;
}
#touch-ctrl.tc-show{ display:flex; }
body.touch-device #hint{ display:none; }

.tc-dpad{
  display:grid; gap:5px; pointer-events:none;
  grid-template-columns:repeat(3, var(--tc-cell));
  grid-template-rows:repeat(3, var(--tc-cell));
}
.tc-up{ grid-column:2; grid-row:1; }
.tc-left{ grid-column:1; grid-row:2; }
.tc-right{ grid-column:3; grid-row:2; }
.tc-down{ grid-column:2; grid-row:3; }

.tc-actions{ display:grid; gap:8px; pointer-events:none;
  grid-template-columns:1fr 1fr; }
.tc-bs{ grid-column:1 / span 2; }

.tc-btn{
  pointer-events:auto;
  width:clamp(64px, 19vmin, 108px);
  height:clamp(46px, 12.5vmin, 74px);
  margin:0; font-family:"Courier New", monospace;
  font-weight:bold; font-size:clamp(11px, 2.6vmin, 16px);
  letter-spacing:1px; text-transform:uppercase; color:#f4f6ff;
  background:#39417a; border:3px solid #11142a; border-radius:0;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.18), inset -3px -3px 0 rgba(0,0,0,0.45);
  -webkit-tap-highlight-color:transparent; touch-action:none; user-select:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0.62; transition:transform .04s, opacity .1s, background .1s;
}
.tc-btn:active{ transform:translateY(2px); opacity:0.92; background:#4a55a0; }
.tc-btn.tc-press{ transform:translateY(2px); opacity:0.92; background:#4a55a0; }
.tc-dpad .tc-btn{ width:var(--tc-cell); height:var(--tc-cell); font-size:clamp(16px,4vmin,26px); }
.tc-jump{ background:#2f7d4f; }
.tc-atk{ background:#9c3b3b; }
.tc-confirm{ background:#b8862b; }
.tc-pause{ background:#4a4f6e; }
.tc-bs{ background:#3b5b9c; }