/* ---------------------------------------------------------------------------
   player.css — the cabinet you are standing at.

   The game runs in a frame inside this page, so leaving it restores the wall
   exactly as it was: same scroll position, same search, same filters. Nothing
   here is injected into the game document.

   Every view uses it, not only the Wall, so each token it borrows from
   tokens.css carries its own fallback.
--------------------------------------------------------------------------- */

.player {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #05030a;
  color: var(--light, #f3eef7);
  /* The launch and exit animations scale from the clicked tile's rect. */
  transform-origin: 0 0;
}

.player[hidden] {
  display: none;
}

.player__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--g-deep, #05030a);
}

/* --- CRT power-on ------------------------------------------------------- */

.player__crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: var(--g-deep, #05030a);
}

.player__crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 46%,
    var(--g-light, #fff) 49.4%,
    #fff 50%,
    var(--g-light, #fff) 50.6%,
    transparent 54%
  );
  animation: crt-on 0.62s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) forwards;
}

.player__crt.is-off {
  animation: crt-fade 0.34s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)) forwards;
}

@keyframes crt-on {
  0% {
    transform: scaleY(0.012);
    opacity: 0;
  }
  22% {
    transform: scaleY(0.012);
    opacity: 1;
  }
  62% {
    transform: scaleY(1);
    opacity: 0.9;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

@keyframes crt-fade {
  to {
    opacity: 0;
  }
}

/* --- the way out -------------------------------------------------------- */

.player__exit {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.4rem;
  border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: 6px; border-end-start-radius: 0;
  background: rgba(10, 7, 14, 0.88);
  border-inline-end: 1px solid var(--hair, rgba(243, 238, 247, 0.09));
  border-bottom: 1px solid var(--hair, rgba(243, 238, 247, 0.09));
  color: var(--light, #f3eef7);
  font-size: var(--step--1, clamp(0.74rem, 0.71rem + 0.15vw, 0.82rem));
  font-variation-settings: 'wdth' 96, 'wght' 620;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1)), transform 0.3s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.player__tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--light, #f3eef7);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.player__tool[hidden] {
  display: none;
}

.player__tool:hover {
  background: rgba(243, 238, 247, 0.1);
}

.player__tool svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* The ring round the ✕ and the ← fills while it is held: the ✕ then asks
   whether to close, the ← takes the bar away. Let go of the ← before its ring
   fills and it was a tap. */
.player__tool .player__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
  pointer-events: none;
}

.player__ring .arc {
  fill: none;
  stroke: var(--attract, #ffb43d);
  stroke-width: 2;
  stroke-linecap: round;
}

.player__exit:hover {
  background: rgba(16, 11, 22, 0.96);
}

.player.is-idle .player__exit {
  opacity: 0;
  transform: translateY(-100%);
}

.player.is-idle:focus-within .player__exit,
.player.is-idle .player__exit:focus-visible {
  opacity: 1;
  transform: none;
}

/* Whoever opened the game puts its own line here: a session's round count,
   waiting notes and the host's buttons. */
.player__slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

.player__slot:empty {
  display: none;
}

/* Folded: only the ← is left, small and see-through, never fading away. */
.player.is-folded .player__close,
.player.is-folded .player__roll,
.player.is-folded .player__slot {
  display: none;
}

.player.is-folded .player__exit {
  padding: 0.2rem;
  opacity: 0.55;
  transform: none;
}

.player.is-folded .player__exit:hover {
  opacity: 1;
}

/* Held: the bar is gone until the hub is reloaded. */
.player.is-bare .player__exit {
  display: none;
}

/* Create + Options gave the bar to a controller: it stays in view, and the
   button the D-pad is on is lit. */
.player.has-pad .player__exit {
  opacity: 1;
  transform: none;
}

.player__tool.is-pad,
.player__ask button.is-pad {
  outline: 2px solid var(--attract, #ffb43d);
  outline-offset: 1px;
}

/* PS (or Create + Options) held for the bar: the bar comes into view and the
   line under it fills; full, the bar is the controller's. */
.player.is-pad-holding .player__exit {
  opacity: 1;
  transform: none;
}

.player__exit::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--attract, #ffb43d);
  transform: scaleX(var(--pad-hold, 0));
  transform-origin: left;
  pointer-events: none;
}

[dir='rtl'] .player__exit::after {
  transform-origin: right;
}

/* What the controller's buttons do while it has the bar. */
.player__padhints {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: 0.35rem;
  padding-inline: 0.55rem 0.2rem;
  border-inline-start: 1px solid var(--hair, rgba(243, 238, 247, 0.09));
  white-space: nowrap;
}

.player.has-pad .player__padhints {
  display: inline-flex;
}

.player__padhints .pad-btn + span:not(:last-child) {
  margin-inline-end: 0.45rem;
}

/* Once a game shows a controller, a tip under the bar names the buttons that
   give it the bar, for a few seconds. */
.player__padtip {
  position: absolute;
  top: 3.1rem;
  inset-inline-start: 0.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 1rem);
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  background: rgba(10, 7, 14, 0.9);
  color: var(--light, #f3eef7);
  font-size: var(--step--1, clamp(0.74rem, 0.71rem + 0.15vw, 0.82rem));
  pointer-events: none;
  animation: player-padtip 5s ease forwards;
}

.player__padtip-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

@keyframes player-padtip {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  6%,
  85% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player__padtip {
    animation: none;
  }
}

/* ✕ held all the way round: one last question before the game closes. */
.player__ask {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 3, 10, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.player__ask-card {
  display: grid;
  gap: 0.8rem;
  width: min(26rem, 100%);
  padding: 1.3rem 1.4rem;
  border-radius: 10px;
  background: var(--room, #16111d);
  border: 1px solid var(--edge, rgba(243, 238, 247, 0.16));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.player__ask-card h2 {
  margin: 0;
  font-size: var(--step-1, clamp(1.05rem, 1rem + 0.3vw, 1.25rem));
  font-variation-settings: 'wdth' 108, 'wght' 800;
}

.player__ask-card p {
  margin: 0;
  color: var(--dust, #a99db6);
}

.player__ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.player__ask-actions button {
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font: inherit;
  font-variation-settings: 'wdth' 104, 'wght' 700;
  cursor: pointer;
}

.player__ask-go {
  background: var(--attract, #ffb43d);
  color: var(--attract-ink, #2a1c05);
}

.player__ask-stay {
  background: rgba(243, 238, 247, 0.1);
  color: var(--light, #f3eef7);
}

/* --- when a game refuses the frame -------------------------------------- */

.player__bail {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: var(--gutter, clamp(1rem, 0.35rem + 2.6vw, 2.75rem));
  text-align: center;
  background: var(--room-deep, #0c0910);
}

.player__bail h2 {
  font-size: var(--step-2, clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem));
  font-variation-settings: 'wdth' 112, 'wght' 800;
}

.player__bail p {
  max-width: 44ch;
  color: var(--dust, #a99db6);
}

.player__bail a {
  padding: 0.8rem 1.4rem;
  border-radius: 4px;
  background: var(--attract, #ffb43d);
  color: var(--attract-ink, #2a1c05);
  font-variation-settings: 'wdth' 106, 'wght' 750;
}

.player__bail button {
  color: var(--dust-dim, #746a80);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--step--1, clamp(0.74rem, 0.71rem + 0.15vw, 0.82rem));
}

.player__bail button:hover {
  color: var(--light, #f3eef7);
}