/* Additions to the old play page's main.css: the game area, its loading bar and
   full-screen button, Unity's warning banner, and the phones message. */

#game {
  position: relative;
  margin: 0 auto;
  background: #000;
}

#unity-canvas {
  display: block;
  outline: none;
}

/* Full screen on the game box: black around a centred 16:9 canvas (index.html sizes
   the canvas).  The browser makes the full-screen element fill the screen. */
#game:fullscreen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#unity-canvas[data-pixel-art="true"] {
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 70%);
}

#loading[hidden] {
  display: none;
}

#progress-empty {
  height: 10px;
  border-radius: 5px;
  background: #515151;
  overflow: hidden;
}

#progress-full {
  height: 100%;
  width: 0%;
  background: teal;
  transition: width 0.2s;
}

#progress-text {
  margin-top: 8px;
  text-align: center;
  color: #ccc;
  font-size: 13px;
}

/* A phone-test build's stamp (index.html): which build this is. */
.build-stamp {
  margin-top: 10px;
  text-align: center;
  color: #8fc8ff;
  font: 12px/1.4 monospace;
}

.build-stamp[hidden] {
  display: none;
}

#game-bar {
  margin: 0 auto;
  height: 34px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#fullscreen-button {
  width: 28px;
  height: 28px;
  border: none;
  background: url('fullscreen-button.png') no-repeat center;
  cursor: pointer;
  opacity: 0.8;
}

#fullscreen-button:hover {
  opacity: 1;
}

.footer {
  padding-bottom: 16px;
}

.credit {
  text-align: center;
  color: teal;
  font-size: 11px;
  margin-top: 8px;
}

/* The controller line in the credit's line (index.html), lighter than the credit. */
.credit .pad {
  color: #d8d8d8;
}

/* How to Play (v0.17, index.html): under the key bindings, a card per thing to learn, each with a clip of
   the game.  The clips are the game's own pixels (427 wide, the HUD strip cropped), shown pixelated at whole display pixels. */
#how-to-play {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 16px 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #e6e6e6;
}

#how-to-play h2 {
  margin: 0;
  text-align: center;
}

#how-to-play h2 img {
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.htp-lead {
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  margin: 12px auto 28px;
  max-width: 560px;
  color: #d0d0d0;
}

/* One card a row, its clip above its words: a clip shows at whole pixels only (index.html sizes it), and at 2x
   (854 px) it needs the room. */
.htp-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.htp-card {
  margin: 0;
  background: #474747;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
}

.htp-card > img {
  display: block;
  margin: 0 auto;
  max-width: none;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.htp-card {
  padding-top: 0;
  background: #000;
}

.htp-card figcaption {
  background: #474747;
}

/* The game's own A button (Menu/A Button.png, 16x16), sized to whole display pixels. */
.htp-glyph {
  vertical-align: -3px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.htp-card figcaption {
  padding: 14px 18px 18px;
}

.htp-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd66b;
}

.htp-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* A key, drawn like the light caps of the key bindings picture above. */
#how-to-play kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #d9dbd6;
  border-bottom: 2px solid #9a9c97;
  color: #333;
  font: 600 12px/1.5 monospace;
  text-align: center;
}

#banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

#banner div {
  padding: 8px 12px;
  font-size: 14px;
  color: #fff;
}

#banner .error {
  background: #8b1e1e;
}

#banner .warning {
  background: #7a5a0c;
}

#phone {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: #515151;
  color: #fff;
  z-index: 3;
}

#phone[hidden] {
  display: none;
}

#phone p {
  text-align: center;
  line-height: 1.4;
  margin: 16px 0;
  max-width: 460px;
}

#phone-anyway {
  font: inherit;
  font-size: 1.5em;
  margin-top: 24px;
  padding: 12px 32px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* How to Play under "Tap to play" (v0.18, index.html): the second thing to tap, so quieter than the first. */
#phone-htp {
  font: inherit;
  font-size: 1.05em;
  margin-top: 18px;
  padding: 10px 24px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: transparent;
  color: #e6e6e6;
  cursor: pointer;
}

#phone-htp[hidden] {
  display: none;
}

/* In another site's frame - itch.io (v0.17, index.html's embedded): the game and its key bindings only. */
body.embedded header,
body.embedded .main-menu,
body.embedded #how-to-play {
  display: none;
}

/* Touch (v0.16): the phone layout - the game alone, filling the screen, black round its canvas, as in full
   screen (index.html sizes the canvas).  The browser's own touch gestures - panning, pinch zoom, text
   selection, the long-press menu - are off over it, so every touch is the game's. */
body.phone {
  overflow: hidden;
  touch-action: none;
}

body.phone header,
body.phone .main-menu,
body.phone .footer,
body.phone #how-to-play,
body.phone #game-bar {
  display: none;
}

body.phone #game {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.phone #game,
body.phone #unity-canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Portrait on a phone (touch step 2): the game across the top, the controls under it (index.html sizes it). */
body.phone.portrait #game,
body.phone.portrait #game:fullscreen {
  align-items: flex-start;
}

/* HOW TO PLAY ON A PHONE (v0.18, index.html): the section only as an overlay over everything, game included, from
   "Tap to play"'s How to Play or portrait's HOW TO PLAY key (touch.js).  It scrolls on its own, the page under it held
   still as ever; a Close bar stays at its top, a Back button ends it, and the cards speak of the joystick and FLIP
   (.htp-touch) instead of keys (.htp-keys).  In another site's frame too, over body.embedded's hiding of the section
   (the rule below is the more specific).  None of it shows on a computer. */
.htp-bar,
.htp-touch,
.htp-end {
  display: none;
}

body.phone-page #how-to-play {
  display: none;
}

body.phone-page.htp-open #how-to-play {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 5;
  max-width: none;
  margin: 0;
  padding: 0 max(12px, calc((100% - 896px) / 2)) 24px;
  border-top: 0;
  background: #515151;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  outline: none;
}

/* The game's own "no gestures" let go while it is covered, so the overlay can be scrolled. */
body.phone.htp-open,
body.phone.htp-open #game {
  touch-action: auto;
}

body.htp-open .htp-bar {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 0;
  background: #515151;
}

body.htp-open .htp-keys {
  display: none;
}

body.htp-open .htp-touch {
  display: block;
}

body.htp-open .htp-end {
  display: block;
  margin: 28px 0 8px;
  text-align: center;
}

.htp-close {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 9px 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  background: #515151;
  color: #fff;
  cursor: pointer;
}

.htp-close.htp-back {
  font-size: 20px;
  padding: 12px 32px;
}

/* The joystick and FLIP in the touch wording: the controls' own art, sized to whole display pixels (index.html). */
#how-to-play canvas.htp-art {
  vertical-align: middle;
  margin: -6px 2px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The touch controls (touch.js): a layer over the game that only the controls themselves take touches on,
   drawn in the game's own pixels. */
#touch-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

#touch-controls[hidden],
.touch-control[hidden] {
  display: none;
}

.touch-control {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The phone's keyboard for a name (touch.js): a text box that is never seen, only focused. */
#name-input {
  position: absolute;
  left: 0;
  top: 0;            /* At the top, where no keyboard covers it: at the bottom, a browser scrolled the
                       whole page up to show it over the keyboard (an S23 Ultra, 2026-10-09: "the whole
                       screen got way cutoff at the top"). */
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  pointer-events: none;
}

/* Move Controls (touch.js): the game dimmed under the controls, and over them a layer that takes every touch
   while they are moved and sized - the grid outlined, a ring round the chosen control, a handle to size it. */
#touch-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

#touch-editor {
  position: absolute;
  inset: 0;
  z-index: 3;
  touch-action: none;
}

#touch-dim[hidden],
#touch-editor[hidden],
#touch-editor [hidden] {
  display: none;
}

.touch-outline {
  position: absolute;
  border: 3px dashed #ffd63c;
  box-sizing: border-box;
  pointer-events: none;
}

.touch-ring {
  position: absolute;
  border: 3px dotted #fff;
  box-sizing: border-box;
  pointer-events: none;
}

.touch-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #222030;
  pointer-events: none;
}

.touch-tool {
  pointer-events: none;
}