/* Play mode, the player's screen (playui.js). Everything is under .play- so it cannot touch
   the rest of the page.

   The root fills the viewport and takes no events itself: the strip, the buttons, the slider
   and the panels' cards switch pointer-events back on, so the level underneath still gets
   its drags, pinches and wheel on the canvas. Sizes are in em, and the root's font size
   follows the host's width (--play-u, set by the script: the host's width over the game's
   1080), the way the game's canvas scales, so a phone-sized frame and a monitor look alike.
   The text itself is held between 11 px (a host under about 310 px wide) and 20 px (one over
   about 570). */

.play-root {
  --play-u: .4;
  --play-bar-h: 160px;
  --play-bg: rgba(27, 28, 31, .86);
  --play-line: var(--line, #35373d);
  --play-text: var(--text, #d8dae0);
  --play-dim: var(--dim, #8c9099);
  --play-accent: var(--accent, #4ea1ff);
  --play-warn: var(--warn, #e0a33e);
  --play-ok: var(--ok, #58c07a);
  position: absolute; inset: 0; z-index: 5; overflow: hidden;
  pointer-events: none;
  color: var(--play-text);
  font-size: clamp(11px, calc(var(--play-u) * 38px), 20px); line-height: 1.3;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.play-root [hidden] { display: none !important; }

/* ---------------------------------------------------------------- buttons */
.play-btn {
  pointer-events: auto; flex: none;
  padding: .35em .85em; font: inherit; line-height: 1.3; color: var(--play-text);
  background: var(--play-bg); border: 1px solid var(--play-line); border-radius: .5em;
  cursor: pointer; touch-action: manipulation;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.play-btn:hover { border-color: var(--play-accent); }
.play-btn:active { transform: translateY(1px); }
.play-btn:focus-visible { outline: 2px solid var(--play-accent); outline-offset: 2px; }
.play-btn.play-primary { background: var(--play-accent); border-color: var(--play-accent); color: #10151c; font-weight: 600; }
.play-btn.play-small { padding: .25em .65em; font-size: .9em; }

/* ------------------------------------------------------------------- tools */
/* Top right: the top left of the viewport is where the design tools and the dev bar sit. */
.play-tools {
  position: absolute; top: .6em; right: .6em; z-index: 3;
  display: flex; align-items: center; gap: .4em;
}

/* --------------------------------------------------------------------- hud */
/* Slides away when the win begins (HideOutPanels, 0.5 s). */
.play-hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  transition: opacity .25s, transform .25s, visibility 0s;
}
.play-ended .play-hud {
  opacity: 0; visibility: hidden; transform: translateY(-1.2em);
  transition: opacity .5s, transform .5s cubic-bezier(.6, -.28, .735, .045), visibility 0s .5s;
}

.play-count {
  position: absolute; left: .8em; bottom: calc(var(--play-bar-h) + .7em);
  padding: .15em .7em; font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--play-bg); border: 1px solid var(--play-line); border-radius: 1em;
}

/* The zoom slider: vertical, zoomed in at the top, like the game's (TopToBottom). */
.play-zoom {
  position: absolute; right: .6em; top: 3.6em; bottom: calc(var(--play-bar-h) + .7em);
  width: 2.6em; pointer-events: auto; touch-action: none; cursor: ns-resize; outline: none;
  display: flex; flex-direction: column; align-items: center;
  background: var(--play-bg); border: 1px solid var(--play-line); border-radius: 1.3em;
}
.play-zoom:focus-visible { border-color: var(--play-accent); }
.play-zoom-end { flex: none; padding: .25em 0; font-size: 1.2em; font-weight: 700; line-height: 1; color: var(--play-dim); }
.play-zoom-rail { position: relative; flex: 1 1 auto; width: .3em; margin: .2em 0; border-radius: .15em; background: rgba(255, 255, 255, .22); }
.play-zoom-knob {
  position: absolute; left: 50%; top: 0; width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em;
  border-radius: 50%; background: var(--play-accent); border: 2px solid #10151c; box-shadow: 0 .1em .4em rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------- strip */
/* The picker bar. Its height is set by the script (21.3 % of the host, the game's number); the
   cells inside are placed by transform, because a cell's width is the squash of its picture. */
.play-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden;
  pointer-events: auto; touch-action: none; cursor: grab;
  background: linear-gradient(to top, rgba(27, 28, 31, .95), rgba(35, 36, 40, .78));
  border-top: 1px solid var(--play-line); box-shadow: 0 -.5em 1.6em rgba(0, 0, 0, .35);
  transition: transform .25s;
}
.play-ended .play-strip { transform: translateY(105%); pointer-events: none; transition: transform .5s cubic-bezier(.6, -.28, .735, .045); }

.play-carrying .play-strip { cursor: grabbing; }
.play-track { position: absolute; inset: 0; will-change: transform; }
.play-cell { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.play-pic { position: absolute; left: 8.25%; right: 8.4%; top: 0; bottom: 0; transform-origin: 50% 50%; }
/* The game's UI shadow: the picture's own silhouette, set down and to the right. */
.play-img {
  display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(calc(var(--play-u) * 10px) calc(var(--play-u) * 8px) calc(var(--play-u) * 3px) rgba(0, 0, 0, .4));
}

/* A cell that has just been revealed: a ring that opens out of it. */
.play-new::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 6%; bottom: 6%; border-radius: 1.2em;
  border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; animation: play-ring .8s ease-out forwards;
}

/* What is left is all hidden: say so, in the middle of the empty bar. */
.play-hidden-only {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 0 1em; text-align: center; font-weight: 600; color: var(--play-warn); pointer-events: none;
  animation: play-breathe 2.2s ease-in-out infinite;
}

/* --------------------------------------------------------------- win panel */
/* The win leaves the level to look at: the panel takes no events, only its card does. */
.play-panel {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: end center; padding-bottom: 14%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s, visibility 0s .5s;
}
.play-panel.open { opacity: 1; visibility: visible; transition-delay: 0s; }

.play-card {
  pointer-events: auto; min-width: min(15em, 90%); max-width: 90%; padding: 1.1em 1.5em; text-align: center;
  background: rgba(35, 36, 40, .95); border: 1px solid var(--play-line); border-radius: 1em;
  box-shadow: 0 1em 3em rgba(0, 0, 0, .55);
  transform: scale(.85); transition: transform .5s cubic-bezier(.3, 1.35, .5, 1);
}
.play-panel.open .play-card { transform: none; }
.play-card-title { font-size: 1.9em; font-weight: 800; line-height: 1.15; }
.play-win .play-card-title { color: var(--play-ok); }
.play-card-sub { margin-top: .3em; color: var(--play-dim); font-variant-numeric: tabular-nums; }
.play-card-actions { display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin-top: 1em; }

/* --------------------------------------------------------------- animations */
@keyframes play-ring { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.18); } }
@keyframes play-breathe { 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .play-root *, .play-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}