/* ---------------------------------------------------------------------------
   Camp drills on the real field (src/drill_field.js): the drill's own cards
   over the snap game — the intro, the rep pops and the results card — in
   the field's scheme (snap.css): ink #0d1b2a, gold #ffd23f, grounds
   #0b0e14 / #111621 / #172032, Jersey 15 + Rubik, 3px ink borders with a
   hard ink shadow. The field's own HUD does the rest.
--------------------------------------------------------------------------- */
.dfx { position: fixed; inset: 0; z-index: 950; pointer-events: none;
  --df-ink: #0d1b2a; --df-gold: #ffd23f; --df-bg1: #111621; --df-bg2: #172032;
  --df-disp: var(--disp, 'Jersey 15', 'Rubik', system-ui, sans-serif); --df-sans: var(--sans, 'Rubik', -apple-system, system-ui, sans-serif);
  font: 700 14px/1.3 var(--df-sans); color: #fff; }
.dfx .disp { font-family: var(--df-disp); font-weight: 400; }
.dfx-back { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  background: rgba(8, 11, 17, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: auto; }
.dfx-card { width: min(520px, 100%); max-height: 100%; overflow-y: auto; padding: 14px 16px 14px;
  background: var(--df-bg1); border: 3px solid var(--df-ink); border-radius: 14px; box-shadow: 0 6px 0 #000; }
.dfx-h { display: flex; align-items: center; gap: 10px; }
.dfx-h > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dfx-h > div b { font-size: 26px; line-height: .9; color: var(--df-gold); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfx-h > div em { font-style: normal; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfx-face { flex: none; width: 48px; height: 48px; border: 3px solid var(--df-ink); border-radius: 10px; overflow: hidden; background: var(--df-bg2); }
.dfx-face img, .dfx-face canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dfx-lv { flex: none; padding: 4px 9px 3px; border: 3px solid var(--df-ink); border-radius: 9px; font: 900 11px/1 var(--df-sans);
  letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 3px 0 #000; }
.dfx-lv.lv-easy { background: #16a34a; } .dfx-lv.lv-medium { background: #1e63d6; } .dfx-lv.lv-hard { background: #e11d48; }
.dfx-card h3 { margin: 10px 0 6px; font-size: 30px; line-height: .95; text-transform: uppercase; }
.dfx-card ul { margin: 0 0 8px; padding: 0 0 0 18px; display: grid; gap: 3px; font-size: 13px; }
.dfx-card li::marker { color: var(--df-gold); }
.dfx-note { margin: 0 0 10px; font-size: 11px; opacity: .7; }
.dfx-load { margin: 6px 0; font-size: 26px; text-align: center; color: var(--df-gold); }
.dfx-btns { display: flex; gap: 8px; justify-content: flex-end; }
.dfx-b { min-width: 120px; padding: 9px 16px 8px; border: 3px solid var(--df-ink); border-radius: 10px; background: var(--df-bg2); color: #fff;
  font: 400 22px/1 var(--df-disp); text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 4px 0 #000; cursor: pointer; touch-action: manipulation; }
.dfx-b.gold { background: var(--df-gold); color: var(--df-ink); }
.dfx-b:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.dfx-grade { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid var(--df-ink); border-radius: 12px;
  font-size: 44px; line-height: 1; box-shadow: 0 4px 0 #000; background: #4b5563; }
.dfx-grade.m-gold { background: var(--df-gold); color: var(--df-ink); }
.dfx-grade.m-silver { background: #cbd5e1; color: var(--df-ink); }
.dfx-grade.m-bronze { background: #c2773a; color: var(--df-ink); }
.dfx-reps { display: grid; gap: 4px; margin: 10px 0 8px; }
.dfx-rep { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; background: var(--df-bg2);
  border: 2px solid var(--df-ink); border-radius: 8px; font-size: 13px; }
.dfx-rep i { font-style: normal; font: 400 18px/1 var(--df-disp); color: var(--df-gold); }
.dfx-rep b { font: 400 20px/1 var(--df-disp); }
.dfx-sum { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.dfx-sum span { font-size: 12px; opacity: .8; }
.dfx-sum b { font-size: 34px; color: var(--df-gold); }
/* a rep's word, over the field for a beat */
.dfx-pop { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); pointer-events: none; animation: dfx-pop 1.5s ease-out forwards; }
.dfx-pop b { display: block; padding: 6px 14px 4px; border: 3px solid var(--df-ink); border-radius: 12px; background: rgba(13,27,42,.82); color: #fff;
  font-size: 30px; white-space: nowrap; box-shadow: 0 4px 0 #000; text-transform: uppercase; }
.dfx-pop.good b { background: var(--df-gold); color: var(--df-ink); }
@keyframes dfx-pop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (orientation: landscape) and (max-height: 540px) {
  .dfx-card { width: min(640px, 100%); padding: 10px 12px 10px; }
  .dfx-card h3 { font-size: 24px; margin: 6px 0 4px; }
  .dfx-card ul { font-size: 12px; gap: 1px; }
  .dfx-reps { grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 8px 0 6px; }
  .dfx-rep { padding: 3px 7px; font-size: 12px; }
  .dfx-b { font-size: 20px; padding: 7px 14px 6px; }
  .dfx-pop b { font-size: 24px; }
}