html, body { margin: 0; height: 100%; background: #0b1a10; overflow: hidden; font-family: "Press Start 2P", monospace, system-ui; color: #fff; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }

#cam { position: fixed; top: calc(env(safe-area-inset-top) + 150px); right: 10px; width: 112px; height: 112px;
  border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 10px #0008; z-index: 5; pointer-events: none; background: #000; }
#cam video, #cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#cam.lost { border-color: #ff5a4f; }
#cue { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 11px; font-weight: bold;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; }

/* Scrolls on short screens instead of cutting off the top and bottom. */
#start { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 12px; padding: 16px; background: rgba(8, 24, 12, .88); text-align: center; overflow-y: auto; box-sizing: border-box; }
#start[hidden] { display: none; }
#start h1 { margin: 0; font-size: 34px; letter-spacing: 2px; color: #ffe066; text-shadow: 3px 3px 0 #2c6e2f; }
#start .world { margin: 0; color: #9be38f; font-size: 13px; letter-spacing: 1px; }
#start .how { margin: 0; font-size: 14px; }
#start b { color: #ffe066; }
#go { font: inherit; font-size: 16px; font-weight: bold; padding: 14px 22px; border: 0; border-radius: 10px; background: #ffe066; color: #1b3a1d;
  box-shadow: 0 4px 0 #b08d1d; cursor: pointer; }
#go:disabled { opacity: .6; }
.opt { font-size: 12px; color: #cfe8c9; }
#status { min-height: 1.2em; font-size: 12px; color: #ffb3ab; max-width: 320px; }
.slider { display: flex; align-items: center; gap: 8px; }
.slider input { width: 120px; accent-color: #ffe066; }

.bindings { display: grid; gap: 8px; width: min(340px, 100%); }
.bindings label { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; font-size: 13px; font-weight: bold; color: #ffe066; text-align: left; }
.bindings select { font: inherit; font-size: 13px; padding: 9px 6px; border: 2px solid #9be38f; border-radius: 8px; background: #10301a; color: #fff; }
.note { margin: 0; font-size: 11px; color: #cfe8c9; max-width: 320px; }

#tools { position: fixed; top: calc(env(safe-area-inset-top) + 268px); right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
#tools[hidden] { display: none; }
#tools button[hidden] { display: none; }
#teach { position: fixed; left: 16px; right: 16px; top: 38%; z-index: 8; padding: 18px 14px; border-radius: 14px; background: rgba(8, 24, 12, .9);
  text-align: center; border: 3px solid #ffe066; }
#teach[hidden] { display: none; }
#teach p { margin: 0 0 12px; font-size: 18px; font-weight: bold; color: #ffe066; line-height: 1.4; white-space: pre-line; }
#teachBar { height: 8px; border-radius: 4px; background: #fff3; overflow: hidden; }
#teachBar i { display: block; height: 100%; width: 0; background: #ffe066; }
#tools button { font: inherit; font-size: 10px; font-weight: bold; padding: 6px 8px; border: 2px solid #fff; border-radius: 8px; background: #0008; color: #fff; }

#debug { position: fixed; left: 8px; bottom: 8px; z-index: 6; padding: 6px 8px; border-radius: 6px; background: #000b;
  font: 11px/1.5 monospace; color: #fff; white-space: pre; pointer-events: none; }
#buildStamp { position: fixed; right: 4px; bottom: 2px; z-index: 11; font: 9px monospace; color: #fff9; pointer-events: none; text-shadow: 0 1px 1px #000; }