/* Botzilla: Specimen 01. The page is just a black stage with the game canvas,
   scaled in whole pixels when it can be (see js/platform.js), and the touch
   controls on top. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #f4f6f8;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#stage, #game { position: fixed; inset: 0; }

#game canvas {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
}

/* ------------------------------------------------------------- touch */

#touch { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#touch[hidden] { display: none; }

/* The D-pad's touch area: a circle a little wider than the D-pad. */
#dpad-zone { position: absolute; pointer-events: auto; border-radius: 50%; }

#dpad {
  position: absolute;
  width: var(--dpad, 96px);
  height: var(--dpad, 96px);
  margin: calc(var(--dpad, 96px) / -2) 0 0 calc(var(--dpad, 96px) / -2);
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 0.15s;
}
#dpad.menu { opacity: 0.55; }
#dpad.active { opacity: 0.8; transition: opacity 0.1s; }
/* Out of the way while dialogue shows something under it (see touch.js). */
body.dpad-off #dpad { opacity: 0; }
body.dpad-off #dpad-zone { pointer-events: none; }
#dpad img { width: 100%; height: 100%; }

#face {
  position: absolute;
  width: var(--face, 185px);
  height: var(--face, 185px);
}

.tb, .ts {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  opacity: 0.4;
  transition: opacity 0.12s, transform 0.08s;
  touch-action: none;
}
.tb[hidden], .ts[hidden] { display: none; }
.tb { width: var(--b, 56px); height: var(--b, 56px); }
.ts { width: calc(var(--b, 56px) * 0.72); height: calc(var(--b, 56px) * 0.72); opacity: 0.85; }
/* The menu and swap buttons sit in the margins, so they can be bold, with a
   small label underneath. */
.ts::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 2px;
  font: 700 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.06em;
  color: #9af2f2;
  /* A dark outline, so it reads over the game's light floors too. */
  text-shadow: 1px 0 0 #10131f, -1px 0 0 #10131f, 0 1px 0 #10131f, 0 -1px 0 #10131f, 1px 1px 0 #10131f;
  white-space: nowrap;
  pointer-events: none;
}
.ts.pressed { opacity: 1; }
.tb.pressed, .ts.pressed { opacity: 0.9; transform: scale(0.92); }
.tb img, .ts img, #dpad img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* A bottom-right diamond, like the controllers: A right, B bottom, X top, Y
   left, each --spread from the next along each axis (set in js/touch.js). */
.tb[data-action="A"] { right: 0; bottom: var(--spread); }
.tb[data-action="B"] { right: var(--spread); bottom: 0; }
.tb[data-action="X"] { right: var(--spread); bottom: calc(var(--spread) * 2); }
.tb[data-action="Y"] { right: calc(var(--spread) * 2); bottom: var(--spread); }
/* PlayStation buttons (see touch.js): Cross bottom, Circle right, Square
   left, Triangle top. They're dark, so they fade less to stay visible over
   light floors. */
body.touch-ps .tb { opacity: 0.62; }
body.touch-ps .tb.pressed { opacity: 0.95; }
body.touch-ps .tb[data-action="A"] { right: var(--spread); bottom: 0; }
body.touch-ps .tb[data-action="B"] { right: 0; bottom: var(--spread); }
body.touch-ps .tb[data-action="X"] { right: calc(var(--spread) * 2); bottom: var(--spread); }
body.touch-ps .tb[data-action="Y"] { right: var(--spread); bottom: calc(var(--spread) * 2); }

/* While a dialogue box is open only A and B matter, so the rest fade further. */
body.talking .tb[data-action="X"], body.talking .tb[data-action="Y"] { opacity: 0.15; }
/* On a page of text (the controls screen) everything fades, still working. */
body.reading .tb, body.reading #dpad { opacity: 0.14; }

/* ------------------------------------------------------------- notices */

#notice {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(16, 19, 31, 0.92);
  border: 1px solid #2f4c7a;
  color: #f4f6f8;
  text-align: center;
  z-index: 20;
  pointer-events: auto;
}
#notice[hidden] { display: none; }

/* Measures the edges to keep things out from under (js/platform.js): inside
   Discord, Discord's own values, which include its buttons on phones;
   elsewhere the screen's notches and rounded corners. */
#safe-probe {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
  padding-top: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
  padding-right: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
  padding-bottom: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  padding-left: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
}

/* ------------------------------------------------------- turn sideways */

#rotate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #10131f;
  color: #9af2f2;
  font-size: 16px;
  text-align: center;
  padding: 24px;
}
#rotate[hidden] { display: none; }
#rotate .phone {
  width: 46px;
  height: 80px;
  border: 4px solid #9af2f2;
  border-radius: 9px;
  animation: turn 2.2s ease-in-out infinite;
}
@keyframes turn {
  0%, 25% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
body.rotate-on #touch { display: none; }