/* The on-screen pad for pad games: a floating stick (touch or mouse) and the buttons. Shared by the feed (index.html) and the
   review page (admin/), so a reviewer plays exactly what players get. The page shows #joy when the game is a pad game. */
#joy { --b: 3px; --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h3v1h1V0h3v1h1v3H8v1H7v1H6v1H5v1H4V7H3V6H2V5H1V4H0V1h1z'/%3E%3C/svg%3E"); }
@keyframes blink { 50% { opacity: 0.2; } }
#joy { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#joy[data-pad='none'] { display: none; }
/* bottom third only: taps higher up reach the game frame, which keeps its audio unlocked */
.fj-zone { position: absolute; left: 0; top: 66.6%; bottom: 0; width: 58%; pointer-events: auto; touch-action: none; cursor: grab; }
.fj-base {
  position: absolute; left: 80px; bottom: 88px; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; border: var(--b) solid var(--paper); background: rgb(0 0 0 / 0.35);
  opacity: .4; pointer-events: none; transition: opacity .12s;
}
#joy.active .fj-base { opacity: 1; }
/* the knob is the player's soul */
.fj-knob {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 36px; margin: -18px 0 0 -20px;
  background: var(--gold);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}
.pad-btns { position: absolute; inset: 0; pointer-events: none; }
.pad-btn {
  position: absolute; pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; opacity: .85;
  border: var(--b) solid var(--gold); background: rgb(0 0 0 / 0.45);
  color: var(--gold); font-weight: 700; font-size: 20px; font-family: inherit;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.pad-btn.alt { border-color: var(--paper); color: var(--paper); }
.pad-btn.long { font-size: 11px; letter-spacing: -.02em; }
.pad-btn.held { opacity: 1; background: var(--gold); color: var(--ink); transform: scale(0.94); }
.pad-btn.alt.held { background: var(--paper); }
/* a controller is plugged in: the touch pad is only a fallback, so fade it right back */
/* touch pad held back until the first tap lands in the game frame (unlocks audio on iOS) */
.fj-tap { display: none; position: absolute; left: 0; right: 0; top: 38%; text-align: center; color: var(--paper); font-weight: 700; letter-spacing: .12em; pointer-events: none; animation: blink 1s steps(2) infinite; }
#joy.locked .fj-tap { display: block; }
#joy.locked .fj-zone, #joy.locked .fj-base, #joy.locked .pad-btns { display: none; }
/* twin pad: the left stick floats in the left half, the right stick is fixed at the bottom right, buttons in rows of three
   beside it (landscape) or above it (portrait) */
#joy[data-pad='twin'] { container-type: size; }
#joy[data-pad='twin'] .fj-zone { width: 50%; }
#joy[data-pad='twin'] .fj-base { bottom: 32px; }   /* the left ring rests level with the right stick */
.fj-rzone {
  position: absolute; right: 24px; bottom: 32px; width: 112px; height: 112px; pointer-events: auto; touch-action: none;
  border-radius: 50%; border: var(--b) solid var(--paper); background: rgb(0 0 0 / 0.35); opacity: .55;
}
.fj-rzone:active { opacity: 1; }
#joy[data-pad='twin'] .pad-btn { width: 52px; height: 52px; right: calc(24px + 112px + 14px + var(--col) * 62px); bottom: calc(16px + var(--row) * 62px); }
@container (max-aspect-ratio: 6/5) {
  #joy[data-pad='twin'] .pad-btn { right: calc(18px + var(--col) * 62px); bottom: calc(32px + 112px + 14px + var(--row) * 62px); }
}
#joy.locked .fj-rzone { display: none; }
#joy.gp .fj-rzone { opacity: .15; }
#joy.gp .fj-base { opacity: .15; }
#joy.gp.active .fj-base { opacity: .7; }
#joy.gp .pad-btn { opacity: .22; background: rgb(0 0 0 / 0.15); }
#joy.gp .pad-btn.held { opacity: .8; }
/* gamepad cursor for touch-scheme games (a stick-driven virtual mouse) */
#gp-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--gold, #ffd93d); border-radius: 50%; background: rgb(0 0 0 / 0.35); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6); pointer-events: none; }
#gp-cursor.down { background: var(--gold, #ffd93d); transform-origin: center; }
#gp-cursor[hidden] { display: none; }