/* Super Queso Bro: page chrome. The game itself draws everything on a 320x224 canvas
   that is scaled up with nearest-neighbour filtering so pixels stay crisp. */
:root {
  --bg: #120a20;
  --frame: #2a1a40;
  --text: #cbbde0;
  --accent: #f4b83a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body:not(.touch) #stage { bottom: 26px; }

#game {
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 4px var(--frame), 0 12px 40px rgba(0, 0, 0, .6);
  touch-action: none;
}

#help {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 6px;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  opacity: .7;
  pointer-events: none;
}
#help b { color: var(--accent); font-weight: 600; }
#help span { white-space: nowrap; margin: 0 6px; }

/* ---------- touch controls ---------- */
#touch { display: none; }
body.touch #touch { display: block; }
body.touch #help { display: none; }

#touch .pad {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
#touch .pad.left { left: max(18px, env(safe-area-inset-left)); }
#touch .pad.right { right: max(18px, env(safe-area-inset-right)); }

#touch button {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45);
  background: rgba(30, 18, 50, .45);
  color: #fff;
  font: 700 18px ui-monospace, Menlo, monospace;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch button.big { width: 84px; height: 84px; background: rgba(216, 40, 47, .5); font-size: 15px; }
#touch button.small { width: 56px; height: 56px; font-size: 12px; }
#touch button.on { background: rgba(244, 184, 58, .7); }

#touch-mode {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  width: auto !important;
  height: 34px !important;
  border-radius: 17px !important;
  padding: 0 14px;
  font-size: 12px !important;
}

/* ---------- top-right corner: full screen (everywhere) and START (touch only) ---------- */
#corner {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  z-index: 5;
}
#corner button {
  height: 34px;
  min-width: 34px;
  padding: 0 14px;
  border-radius: 17px;
  border: 3px solid rgba(255, 255, 255, .45);
  background: rgba(30, 18, 50, .45);
  color: #fff;
  font: 700 12px ui-monospace, Menlo, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#corner button.on { background: rgba(244, 184, 58, .7); }
#touch-start { display: none !important; }
body.touch #touch-start { display: flex !important; }

#fs-btn { padding: 0 !important; width: 34px; opacity: .7; }
#fs-btn:hover, #fs-btn:focus-visible { opacity: 1; }
#fs-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
#fs-btn .exit, body.fs #fs-btn .enter { display: none; }
body.fs #fs-btn .exit { display: block; }

body.fs #help { display: none; }
body.fs #stage { bottom: 0; }

/* a short message, e.g. how to get full screen on iPhone */
#toast {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: rgba(20, 10, 35, .94);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  z-index: 10;
}
#toast[hidden] { display: none; }

/* stick / D-pad switch: the active choice is highlighted */
#touch-mode { left: max(10px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 10px; }
#touch-mode span { opacity: .45; }
#touch-mode span.active { opacity: 1; color: var(--accent); }

/* ---------- analog stick (floating: it centres wherever your thumb lands in the lower-left zone) ---------- */
#stick-zone {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 50vw;
  height: 60vh;
  touch-action: none;
}
body.stick-mode #stick-zone { display: block; }
body.stick-mode #touch .dpad { display: none; }

#stick {
  position: absolute;
  left: calc(max(18px, env(safe-area-inset-left)) + 62px);
  top: calc(100% - max(18px, env(safe-area-inset-bottom)) - 62px);
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45);
  background: rgba(30, 18, 50, .45);
  pointer-events: none;
  opacity: .75;
}
#stick.held { opacity: 1; }
#stick .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
#stick.held .knob { background: rgba(244, 184, 58, .85); }