/* Opening a puzzle: the layer that carries the tile to the board. js/entry.js
   has the timings and the sequence; this is only where things sit. Inline
   left/top/width/height come from measured rects, so nothing here may add a
   margin, a border or a transform of its own. */
#entry-layer {
  position: fixed; inset: 0; z-index: 120; overflow: hidden;
  /* every tap lands here until the grid shows, then the layer lets go */
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.entry-from { position: absolute; inset: 0; }
.entry-clip { position: absolute; overflow: hidden; }

/* The source screen is out of the page now: its size is frozen, its enter
   animation must not replay, and a press still in progress may finish. */
.entry-frozen {
  position: absolute !important; margin: 0 !important; max-width: none !important; min-height: 0 !important;
  animation: none !important;
}

.entry-win {
  position: absolute; margin: 0; overflow: hidden; transform-origin: 0 0;
  background: #faf3e3;      /* the same cream every thumbnail sits on */
}
.entry-media {
  position: absolute; display: block; max-width: none; max-height: none; margin: 0;
  object-fit: fill;
}

/* The stage over the board. entry.js paints the black and cream squares on the
   canvas and then clears the real cells through it. The name's letters sit
   above it, shown as their squares land, sized by title-grid.js. Fixed ink, not theme colours: the black
   stays black in both themes. */
.entry-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.entry-name { position: absolute; margin: 0; }
.entry-sq {
  position: absolute; box-sizing: border-box; display: grid; place-items: center;
  width: calc(var(--sq) + var(--line)); height: calc(var(--sq) + var(--line));
  color: #0e0e0b; visibility: hidden;   /* until its square lands */
  font: 900 calc(var(--sq) * .72)/1 var(--ui-headline);
}
.entry-letter { display: block; }

/* Laid out and measurable, but not yet seen. */
.player.entering > * { opacity: 0; }
body.entry-on :is(.app > .adbar, .app > .genbar) { opacity: 0; }

/* Home's art opens the puzzle too; the button under it stays the named control */
.play-stage:has(.stage-play[href^="#/play/"]) .stage-art { cursor: pointer; }

/* Quiet by default: only a load that really takes a while shows a spinner */
.play-loading .loading { animation: play-wait 200ms ease-out 240ms backwards; }
@keyframes play-wait { from { opacity: 0; } }