/* ============================================================
   The Last Obelisk

   There is almost nothing here. The status bars, satchel, map,
   message box, menus and title screen are all painted into the
   pixel buffer by script.js using the game's own bitmap font,
   so this file only has to place the frame and the touch pad.
   ============================================================ */

:root{ --z:2; --u:calc(var(--z) * 1px); }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#f4f4ec}
body{display:grid;place-items:center;-webkit-user-select:none;user-select:none;touch-action:none}

/* the frame: exactly 800 x 600, centred, scaled down only if the window is smaller */
#stage{
  position:relative;
  width:800px;height:600px;
  overflow:hidden;
  background:#07060b;
  transform-origin:center center;
  box-shadow:0 0 0 2px #17151f;
}

canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#cv{display:block;position:absolute;inset:0;width:800px;height:600px}

/* ---------- touch pad, shown only on touch devices while playing ---------- */
#touch{position:absolute;inset:0;z-index:6;display:none}
#touch.on{display:block}
#stick{position:absolute;width:calc(var(--u)*40);height:calc(var(--u)*40);
  border:var(--u) solid rgba(244,244,236,.3);background:rgba(13,11,18,.45);opacity:0}
#knob{position:absolute;width:calc(var(--u)*16);height:calc(var(--u)*16);
  background:rgba(244,244,236,.35);border:var(--u) solid rgba(244,244,236,.6);
  left:calc(var(--u)*12);top:calc(var(--u)*12)}
.tbtn{position:absolute;pointer-events:auto;font-family:monospace;letter-spacing:1px;
  color:#f4f4ec;background:rgba(13,11,18,.6);border:var(--u) solid rgba(244,244,236,.45);
  font-size:calc(var(--u)*5);display:grid;place-items:center}
#tAtk{right:calc(var(--u)*6);bottom:calc(var(--u)*46);width:calc(var(--u)*30);height:calc(var(--u)*30)}
#tDash{right:calc(var(--u)*40);bottom:calc(var(--u)*24);width:calc(var(--u)*22);height:calc(var(--u)*22)}