/* FieldSync tag check-in.
 *
 * Sizes are for gloves, bifocals and arm's length. Nothing tappable is under
 * 56px in its short dimension, and the purple carries through from the rest of
 * the app so this reads as part of it rather than bolted on.
 */

:root {
  --nfcPurple: #7c3aed;
  --nfcPurpleDim: #4c1d95;
}

/* ── The "mode is armed" badge ─────────────────────────────────────────
   Next to the check-in title, because that is where the official is already
   looking. Forgetting the mode is on is how the screen "changes by itself"
   later, so it says so permanently rather than in a toast that vanishes. */
.nfcBadge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 3px 10px;
  border-radius: 999px;
  background: var(--nfcPurple); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  vertical-align: middle; white-space: nowrap;
}
.nfcBadge[hidden] { display: none; }

/* ── The per-athlete chip ──────────────────────────────────────────────
   Two states, legible without reading: solid purple = has a tag, dashed and
   hollow = does not. The EMPTY state is the louder one on purpose, because the
   official's job on this screen is finding who still needs one. */
.checkinActionCell { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.nfcChip {
  font: inherit; font-size: 18px; line-height: 1;
  min-width: 56px; height: 44px; padding: 0 10px;
  border-radius: 10px; cursor: pointer;
}
.nfcChip.has {
  background: var(--nfcPurple); border: 1px solid var(--nfcPurple); color: #fff;
}
.nfcChip.none {
  background: transparent; border: 2px dashed var(--nfcPurple);
  color: var(--nfcPurple); opacity: .95;
}
.nfcChip.none::after {
  content: " +"; font-weight: 800;
}

/* ── The assign screen ────────────────────────────────────────────────── */
.nfcAsk {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #2b1065 0%, #0c0f14 70%);
  color: #f4f0ff;
  -webkit-tap-highlight-color: transparent;
}
/* The way out is the first thing, top-left. Feeling trapped in a modal is what
   stops people using a feature a second time. */
.nfcAskBar { padding: 10px 12px; }
.nfcAskOut {
  font: inherit; font-size: 17px; font-weight: 700;
  min-width: 120px; height: 52px; padding: 0 18px;
  color: #f4f0ff; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
}

.nfcAskStage { position: relative; flex: 1 1 auto; min-height: 0; }

/* The target sits where that device's antenna actually is. Three positions,
   picked from the device family rather than a model table: iPhone at the top of
   the back, Samsung mid-back, most others upper. */
.nfcRing {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 168px; height: 168px;
}
.nfcSpot-top .nfcRing    { top: 4%; }
.nfcSpot-upper .nfcRing  { top: 22%; }
.nfcSpot-center .nfcRing { top: 50%; margin-top: -84px; }

.nfcRingCore {
  position: absolute; inset: 34px;
  border-radius: 50%;
  background: var(--nfcPurple);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  box-shadow: 0 0 40px rgba(124,58,237,.65);
}
.nfcRingPulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--nfcPurple);
  animation: nfcPulse 1.6s ease-out infinite;
}
@keyframes nfcPulse {
  0%   { transform: scale(.55); opacity: .9; }
  70%  { transform: scale(1.15); opacity: .10; }
  100% { transform: scale(1.15); opacity: 0; }
}
/* Someone who finds motion unpleasant still gets a clear target. */
@media (prefers-reduced-motion: reduce) {
  .nfcRingPulse { animation: none; opacity: .55; }
}

.nfcAskFoot { padding: 0 22px 30px; text-align: center; }
.nfcAskWho  { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.nfcAskTell { font-size: 19px; line-height: 1.45; color: #e6dcff; }
.nfcAskNote { font-size: 15px; color: #b8a6e8; margin-top: 10px; }

/* Success and failure recolour the whole screen, not a small label -- it has to
   be readable from the distance an arm holds a phone at. */
.nfcAsk.ok  { background: radial-gradient(120% 80% at 50% 0%, #064e3b 0%, #0c0f14 70%); }
.nfcAsk.ok  .nfcRingCore { background: #22c55e; box-shadow: 0 0 44px rgba(34,197,94,.7); }
.nfcAsk.ok  .nfcRingPulse { border-color: #22c55e; animation: none; opacity: .3; }
.nfcAsk.bad { background: radial-gradient(120% 80% at 50% 0%, #5a1220 0%, #0c0f14 70%); }
.nfcAsk.bad .nfcRingCore { background: #ef4444; }
.nfcAsk.bad .nfcRingPulse { border-color: #ef4444; animation: none; opacity: .3; }

.nfcAskRow { display: flex; gap: 12px; margin-top: 16px; }
.nfcAskYes, .nfcAskNo {
  flex: 1 1 0; min-height: 60px; font: inherit; font-size: 17px; font-weight: 700;
  border-radius: 12px; color: #fff;
}
.nfcAskYes { background: var(--nfcPurple); border: 1px solid #a78bfa; }
.nfcAskNo  { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); }

/* A scan landing on the scoring page: confirmation without a dialog, because
   the official is mid-competition and must not have to dismiss anything. */
.nfcToast {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 9400; padding: 12px 20px; border-radius: 999px;
  background: var(--nfcPurple); color: #fff;
  font-size: 18px; font-weight: 800;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .18s;
  pointer-events: none; max-width: 92vw; text-align: center;
}
.nfcToast.on { opacity: 1; }
.nfcToast.bad { background: #ef4444; }

/* The tag option on the athlete-status dialog. Purple so it reads as the same
   feature as the badge and the chip, and full width like its siblings so the
   dialog stays one column of big targets. */
.asNfc {
  background: var(--nfcPurple) !important;
  border: 1px solid #a78bfa !important;
  color: #fff !important;
}

/* A settings row for something this device cannot do. Greyed and explained
   rather than hidden: hiding it leaves an official wondering whether the feature
   exists, and on an iPad or most Android tablets -- neither of which has an NFC
   radio -- that question would never get answered. */
.mpSettingOff { opacity: .55; }
.mpSettingOff .mpSettingName::after {
  content: " — unavailable here";
  font-weight: 400;
}
.mpNfcFix { width: 100%; margin-top: 8px; min-height: 52px; font-weight: 700; }

/* ── The tap ripple ────────────────────────────────────────────────────
   Fires the instant a tag is read, before the server is asked. Deliberately
   large and centred: it has to be unmistakable in peripheral vision to someone
   whose eyes are on the tag and the athlete, not the screen. ~500ms — long
   enough to register, short enough that it is never in the way of the attempt
   dialog that follows it. */
.nfcRipple {
  position: fixed; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 4px solid var(--nfcPurple);
  background: rgba(124, 58, 237, .18);
  opacity: 0;
  pointer-events: none;          /* never intercepts a tap */
  z-index: 9600;
}
.nfcRipple.bad { border-color: #ef4444; background: rgba(239, 68, 68, .18); }
.nfcRipple.go { animation: nfcRip .52s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes nfcRip {
  0%   { transform: scale(.4);  opacity: .95; }
  60%  { opacity: .55; }
  100% { transform: scale(14);  opacity: 0; }
}
/* Someone who finds motion unpleasant still gets the buzz and the toast, which
   carry the whole message between them. */
@media (prefers-reduced-motion: reduce) {
  .nfcRipple.go { animation: nfcRipQuiet .3s ease-out forwards; }
  @keyframes nfcRipQuiet { 0% { opacity: .5; } 100% { opacity: 0; } }
}