/* system/apps/hideaway/styles.css
 *
 * This app is a full-bleed 3D canvas (see app.js's ctx.chrome.setFullBleed(true)) --
 * fills whatever space #appMainContent gives it, no card padding of its own to fight.
 */
.hideaway-root {
  /* Absolute + inset:0, not width/height:100% -- #appMainContent is a
     flex column with align-items:center, and a percentage-sized flex
     child with no in-flow content of its own (everything inside here
     is position:absolute) can end up with an ~0 resolved height.
     inset:0 against the (definite-sized) parent sidesteps that
     entirely -- same pattern #appMainContent itself already uses. */
  position: absolute;
  inset: 0;
  background: #0b0810;
  overflow: hidden;
  touch-action: none; /* this app owns pointer gestures (keyhole tap, etc.), not scroll */
}

.hideaway-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hideaway-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbb8e8;
  font: var(--fs-md, 15px) var(--font-sans, sans-serif);
  z-index: 2;
}

.hideaway-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font: var(--fs-sm, 13px) var(--font-sans, sans-serif);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 2;
}