.player-layer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50vw;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.player-layer.player-1 { left: 0; }
.player-layer.player-2 { right: 0; }

.player-layer .crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
}

.player-layer .prompt {
  position: absolute;
  left: 50%;
  top: calc(50% + 38px);
  min-height: 34px;
  padding: 9px 14px;
  font-size: 16px;
}

.player-layer .held {
  position: absolute;
  right: 18px;
  bottom: 88px;
}

.player-layer .held[hidden] { display: none; }

.player-badge {
  position: absolute;
  top: 88px;
  right: 18px;
  min-width: 170px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  background: rgba(24,18,14,.72);
  color: white;
  text-align: right;
  box-shadow: 0 10px 26px var(--shadow);
  backdrop-filter: blur(10px);
}

.player-badge b {
  display: block;
  font-size: 18px;
  letter-spacing: .12em;
}

.player-badge span {
  display: block;
  margin-top: 4px;
  color: #ffd2a0;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
}

.player-1 .player-badge {
  left: 18px;
  right: auto;
  text-align: left;
}

.controls-hint {
  gap: 12px;
}

.controls-hint span {
  gap: 9px;
  padding: 10px 13px;
  border-radius: 12px;
}

.controls-hint kbd {
  font-size: 15px;
}

.controls-hint i {
  font-size: 15px;
  font-weight: 750;
  opacity: .82;
}

.split-divider {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 0 18px rgba(0,0,0,.45);
  pointer-events: none;
}

@media (max-width: 760px) {
  .player-badge {
    top: 66px;
    min-width: 112px;
    padding: 7px 9px;
  }

  .player-badge b { font-size: 12px; }
  .player-badge span { font-size: 8px; }

  .player-layer .held {
    right: 10px;
    bottom: 136px;
    min-width: 128px;
  }

  .controls-hint span { padding: 7px 9px; }
  .controls-hint kbd,
  .controls-hint i { font-size: 12px; }
}