/* Mode « play » — complète styles.css */

[hidden] { display: none !important; }

.home { position: relative; }

.play-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;          /* actif seulement en mode play : le canevas est masqué sinon */
  cursor: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.play-canvas:focus-visible { box-shadow: inset 0 0 0 1px rgba(20, 19, 17, .25); }

/* le nom animé s'efface pendant que les lettres deviennent des blocs */
.home.is-playing .stage canvas { opacity: 0; transition: opacity .35s ease; }
.home.is-playing .kicker,
.home.is-playing .tagline { position: relative; z-index: 3; pointer-events: none; }

.play-hud {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  pointer-events: none;
}
.play-hud button { pointer-events: auto; }
.play-count { font-variant-numeric: tabular-nums; }

.play-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.play-close svg { width: 16px; height: 16px; }
.play-close:hover { background: rgba(20, 19, 17, .06); }
.play-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.play-msg {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 62%;                    /* recalculé en JS : juste sous le mot */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.play-msg p {
  margin: 0;
  padding: 6px 14px;
  background: var(--ivory);
  font-size: clamp(18px, 2.4vw + 8px, 30px);
  font-weight: 500;
  letter-spacing: .02em;
}
.play-msg button {
  pointer-events: auto;
  font: inherit;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ivory);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 40px;
  cursor: pointer;
}
.play-msg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.modes { z-index: 5; }