/*
 * Angel vs. Devil (game.js): always on, and small.
 *
 *   the pop-up         two calm tiles, 😇 Angel? and 😈 Devil?, in the bottom-right
 *                      corner of their video, 2 s into every call (clear of the
 *                      self-view on a desktop, above the chat sheet on a phone). A
 *                      pick is final: it lights, shows a ✓, then the whole pop-up
 *                      fades and stays gone for the rest of the call.
 *   the status         one quiet pill in the waiting room: "You: 😇 Angel", tinted
 *                      by side, empty and invisible at Neutral
 *   Maximum Angel      a 😎 drifts in on their video and fades
 *   their badge        "😇✨ Maximum Angel" / "😇 Strong Angel" / "😈 Strong Devil" /
 *                      "😈🔥 Super Devil" beside the timer when the other person is
 *                      at 1, 2, 6 or 7, for the whole call
 *   Maximum Devil      the blocked screen, with its 😈 drifting in
 *
 * Dark glass over video, the same in both themes. Every animation is only shown,
 * still, under reduced motion.
 */

/* Nothing of the game over a stage that is still saying something ("Connecting
   you…", "They left"): the glass would let its words show through. */
.stage-overlay:not([hidden]):not(.fading-out) ~ .game-pop,
.stage-overlay:not([hidden]):not(.fading-out) ~ .game-reaction {
  visibility: hidden;
}

/* ---------------------------------------------------------------- the pop-up */

.game-pop {
  position: absolute;
  right: max(var(--sp-3), env(safe-area-inset-right, 0px));
  bottom: var(--sp-3);
  z-index: 5;
  display: flex;
  /* Generous spacing between the two tiles: a mis-tap should not be easy. */
  gap: var(--sp-4);
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--on-video) 16%, transparent);
  border-radius: var(--r-lg);
  background: var(--video-glass);
  animation: game-pop-in var(--dur-3) var(--ease-drift);
}
@keyframes game-pop-in {
  from {
    opacity: 0;
    transform: translateY(var(--sp-2));
  }
}
/* A pick is final: light it, show its ✓ (CONFIRM_MS in game-model.js), then fade
   the whole thing out and stay gone for the rest of the call. */
.game-pop.leaving {
  animation: game-pop-out var(--dur-3) var(--ease-drift) forwards;
}
@keyframes game-pop-out {
  to {
    opacity: 0;
    transform: translateY(var(--sp-2));
  }
}
/* A phone upright with the chat open: just above the sheet, which covers the
   toolbar's place plus --sheet-h minus that of the stage (the overlay's rule in
   chat.css), and rises with the keyboard. Measured from the sheet's full height
   it floated a toolbar's height above the sheet's edge (18 Sep 2026 audit). */
#call.chat-open .game-pop {
  bottom: calc(
    var(--sheet-h) - var(--toolbar-h) + var(--keyboard-inset, 0px) + var(--sp-2)
  );
}

/* Two square-ish tiles: big emoji, one word, easy to tell apart at a glance. */
.game-pick {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid;
  border-radius: var(--r-md);
  background: var(--ring-gap);
  color: var(--on-video);
  font: 600 var(--t-small) / 1.2 var(--font-ui);
  text-align: center;
}
@media (pointer: coarse) {
  .game-pick {
    min-height: var(--tap);
  }
}
.game-pick.angel {
  border-color: var(--angel);
  background: color-mix(in srgb, var(--angel) 16%, var(--ring-gap));
}
.game-pick.devil {
  border-color: var(--devil);
  background: color-mix(in srgb, var(--devil) 16%, var(--ring-gap));
}
.game-pick-mark {
  font-size: var(--t-title);
  line-height: 1;
}
.game-pick-word {
  line-height: 1.2;
}
@media (hover: hover) {
  .game-pick:hover.angel {
    background: color-mix(in srgb, var(--angel) 30%, var(--ring-gap));
  }
  .game-pick:hover.devil {
    background: color-mix(in srgb, var(--devil) 30%, var(--ring-gap));
  }
}
/* Picked: yours lit, the other steps back. The whole pop-up is about to fade for
   both, so there is no second pick to make either way. */
.game-pop.picked .game-pick[aria-pressed="false"] {
  opacity: 0.5;
}
.game-pick[aria-pressed="true"].angel {
  background: color-mix(in srgb, var(--angel) 40%, var(--ring-gap));
}
.game-pick[aria-pressed="true"].devil {
  background: color-mix(in srgb, var(--devil) 40%, var(--ring-gap));
}

/* The ✓ confirmation: a small badge on the picked tile's corner, shown only once
   picked, and only on that one tile. No motion of its own — one clean toggle
   reads as calmer than another thing fading in right as the pop-up starts leaving. */
.game-pick-check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--t-small);
  line-height: 1;
  opacity: 0;
}
.game-pick.angel .game-pick-check {
  background: var(--angel);
  color: var(--ring-gap);
}
.game-pick.devil .game-pick-check {
  background: var(--devil);
  color: var(--ring-gap);
}
.game-pop.picked .game-pick[aria-pressed="true"] .game-pick-check {
  opacity: 1;
}

/* ------------------------------------------------ the waiting room's status */

/* "You: 😇 Angel": one quiet pill under the search. Empty, it keeps its space.
   data-side (set from app.js, from game.js's own statusSide()) tints the border
   and reads the emoji a little larger; Neutral and "on its way" carry no side. */
.overlay-status {
  min-height: 2em;
  margin-top: var(--sp-2);
  padding: 4px 14px;
  border: 1px solid color-mix(in srgb, var(--on-video) 18%, transparent);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--on-video) 8%, transparent);
  color: var(--on-video);
  font: 600 var(--t-body) / 1.5 var(--font-ui);
}
.overlay-status:empty {
  visibility: hidden;
}
/* The slider under the words: eight dots from the Angel end to the Devil end,
   yours a little bigger and solid. Its colour follows the pill's side. */
.status-track {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--sp-2);
  vertical-align: middle;
}
.status-track i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}
.status-track i.here {
  width: 8px;
  height: 8px;
  opacity: 1;
}
.overlay-status[data-side="angel"] .status-track {
  color: var(--angel);
}
.overlay-status[data-side="devil"] .status-track {
  color: var(--devil);
}
.overlay-status[data-side="angel"] {
  border-color: var(--angel);
}
.overlay-status[data-side="devil"] {
  border-color: var(--devil);
}

/* ------------------------------------------- Maximum Angel: their 😎 reaction */

.game-reaction {
  position: absolute;
  top: calc(max(var(--sp-3), env(safe-area-inset-top, 0px)) + 3rem);
  left: max(var(--sp-4), env(safe-area-inset-left, 0px));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: calc(70% - 2 * var(--sp-3));
  padding: 6px var(--sp-4) 6px 6px;
  border: 1px solid var(--angel);
  border-radius: var(--r-full);
  background: var(--video-glass);
  color: var(--on-video);
  pointer-events: none;
}
.game-reaction-mark {
  font-size: var(--t-title);
  line-height: 1;
}
.game-reaction-text {
  font: 700 var(--t-small) / 1.3 var(--font-ui);
}
.game-reaction.play {
  animation: game-pop 2400ms var(--ease-drift) forwards;
}
/* Drift, not bounce (docs/brand.md): it rises into place, rests, and fades. */
@keyframes game-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  16% {
    opacity: 1;
    transform: none;
  }
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

/* ------------------------------------------------ Maximum Devil: the block */

.blocked-devil {
  display: none;
}
#blocked.devil .blocked-icon {
  display: none;
}
#blocked.devil .blocked-devil {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--t-display);
  line-height: 1;
  animation: game-devil var(--dur-3) var(--ease-drift);
}
#blocked.devil .blocked-card {
  border-color: var(--devil);
}
/* A ban is read while upset: the 😈 settles in once, no shake, no wobble. */
@keyframes game-devil {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* Still, for the same time, under reduced motion: animations would end at their
   base style. The pop-up still leaves at the same moment (game.js's FADE_MS
   timer does not know about this query) — only the motion is gone. */
/* ------------------------------------------------------ the other's badge */

/* Top left of their video (a chip in .stage-bar): the person
   you are talking to is at one end of the scale. A sky edge for an Angel, like the
   😎 note, a rose one for a Devil (the game's own two colours, never Report's red);
   the two Supers are filled too. Drifts in once, then stays still for the call. */
.game-badge {
  /* Its title (the badge's sentence) shows on hover: .stage-bar takes no pointer. */
  pointer-events: auto;
  gap: 4px;
  padding-inline: 6px 10px;
  border: 1px solid var(--angel);
  animation: game-badge-in var(--dur-4) var(--ease-drift) backwards;
}
.game-badge.super {
  background: color-mix(in srgb, var(--angel) 22%, var(--ring-gap));
}
.game-badge.devil {
  border-color: var(--devil);
}
.game-badge.devil.super {
  background: color-mix(in srgb, var(--devil) 22%, var(--ring-gap));
}
.game-badge-mark {
  font-size: 1rem;
  line-height: 1;
}
@keyframes game-badge-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-badge {
    animation: none;
  }
  .game-reaction.play {
    opacity: 1;
    animation: none;
  }
  .game-pop {
    animation: none;
  }
  .game-pop.leaving {
    opacity: 1;
    animation: none;
  }
}

/* ------------------------------------------------------------------- layouts */

/* Desktop: the self-view holds the bottom-right; the buttons sit just left of it. */
@media (min-width: 56.25rem) {
  @media not all and (max-height: 32rem) {
    .game-pop {
      right: calc(clamp(9rem, 22%, 15rem) + 2 * var(--sp-3));
    }
    #call.chat-open .game-pop {
      bottom: var(--sp-3);
    }
  }
}

/* A phone on its side: the chat comes in from the right, so the buttons move over. */
@media (orientation: landscape) and (max-height: 32rem) {
  .game-pop {
    bottom: var(--sp-2);
  }
  #call.chat-open .game-pop {
    right: calc(var(--sheet-w) + var(--sp-3));
    bottom: var(--sp-2);
  }
  /* The self-view moves to the top left here (chat.css): the 😎 note goes under it,
     not over it. */
  #call.chat-open .game-reaction {
    top: calc(
      max(var(--sp-2), env(safe-area-inset-top, 0px)) + 28px + var(--sp-2) +
        38% + var(--sp-2)
    );
  }
}