/* Cock Fight modal — Pokemon-style elemental battle */

@font-face {
  font-family: 'Pokemon Pixel';
  src: url('../font/pokemon_pixel_font.ttf') format('truetype');
  font-display: swap;
}

/* Header launcher button (sits next to Racing) */
#cock-fight-btn {
  background: linear-gradient(135deg, #3a1418, #200a10);
  border: 1.5px solid #c04040;
  border-radius: 8px;
  color: #ffc0a0;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  /* PERF: dropped box-shadow from transition — banner button always visible,
     hover triggers a paint-heavy dual shadow change. Snap it. */
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.02em;
  box-shadow: 0 0 10px 2px rgba(220, 90, 80, 0.35), 0 0 20px 4px rgba(220, 90, 80, 0.18);
}
#cock-fight-btn:hover {
  background: linear-gradient(135deg, #5a1c20, #3a1018);
  border-color: #ff6060;
  color: #ffe0d0;
  box-shadow: 0 0 14px 3px rgba(255, 120, 100, 0.55), 0 0 28px 6px rgba(220, 90, 80, 0.3);
}

/* Type badge — used in harem cards, recruitment toast, picker, info card */
.cf-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  vertical-align: middle;
}
.cf-type-badge-sm {
  padding: 1px 6px;
  font-size: 10px;
  gap: 3px;
}
.cf-type-badge-ico {
  font-size: 10px;
  line-height: 1;
}
.cf-type-badge-lbl {
  text-transform: uppercase;
}

/* Modal shell shared by picker + battle */
.cf-modal {
  width: 94vw;
  max-width: 1100px;
  height: 88vh;
  max-height: 820px;
  background: linear-gradient(180deg, #160a28 0%, #0d0818 100%);
  border: 1.5px solid #6030b0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 28px rgba(140, 70, 210, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: fadeInScale 0.25s ease;
  font-family: inherit;
}
.cf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, #160a28 0%, #0d0818 100%);
  border-bottom: 1px solid #3a1860;
  flex: 0 0 auto;
}
.cf-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffe0a0;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255, 180, 80, 0.4);
  font-family: Calibri, sans-serif;
}

/* ── Opponent slot machine ─────────────────────────────────────────────── */
.cf-slot-modal { display: flex; flex-direction: column; }
.cf-slot-title {
  font-size: 23px;
  font-weight: 800;
  color: #ffe060;
  text-align: center;
  padding: 14px 12px 6px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(255, 224, 96, 0.55);
  font-family: Calibri, sans-serif;
}
.cf-slot-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  position: relative;
}
.cf-slot-window {
  width: min(440px, 86vw);
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a0828, #0a041a);
  border: 2px solid #6030b0;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(170, 90, 240, 0.4);
}
.cf-slot-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform;
}
.cf-slot-row {
  height: 70px;
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(96, 48, 176, 0.25);
  box-sizing: border-box;
}
.cf-slot-row-cyl {
  width: 28px;
  height: 56px;
  border-radius: 8px 8px 6px 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 1.5px 1.5px 3px rgba(255, 255, 255, 0.55),
    inset -1.5px -2px 4px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.cf-slot-row-info { flex: 1; min-width: 0; }
.cf-slot-row-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  font-family: Calibri, sans-serif;
}
.cf-slot-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; font-family: Calibri, sans-serif; font-weight: 700; }
.cf-slot-row-lvl    { color: #ffd060; font-weight: 700; font-family: Calibri, sans-serif; }
.cf-slot-row-rarity { font-weight: 700; font-size: 14px; font-family: Calibri, sans-serif; }
.cf-slot-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(456px, 88vw);
  height: 78px;
  transform: translate(-50%, -50%);
  border: 3px solid #ffd060;
  border-radius: 14px;
  box-shadow: 0 0 22px rgba(255, 200, 80, 0.55), inset 0 0 12px rgba(255, 200, 80, 0.25);
  pointer-events: none;
  animation: cf-marker-pulse 0.9s ease-in-out infinite;
}
@keyframes cf-marker-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 200, 80, 0.55), inset 0 0 12px rgba(255, 200, 80, 0.25); }
  50%      { box-shadow: 0 0 30px rgba(255, 220, 100, 0.85), inset 0 0 18px rgba(255, 220, 100, 0.4); }
}

/* ── Foe preview (2s reveal between slot and battle) ───────────────────── */
.cf-preview-title {
  color: #ff8090;
  text-shadow: 0 0 12px rgba(255, 120, 140, 0.55);
}
.cf-preview-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  gap: 12px;
}
.cf-preview-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  background: linear-gradient(180deg, #2a1058, #14062c);
  border: 2px solid var(--type-color, #c04040);
  border-radius: 14px;
  box-shadow:
    0 0 26px var(--type-color, rgba(220, 80, 80, 0.45)),
    inset 0 0 18px rgba(0, 0, 0, 0.45);
  max-width: 460px;
  animation: cf-preview-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes cf-preview-pop {
  0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.cf-preview-cyl {
  width: 50px;
  height: 100px;
  border-radius: 12px 12px 8px 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.55),
    inset -2px -3px 5px rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}
.cf-preview-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-preview-name {
  font-size: 23px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Calibri, sans-serif;
}
.cf-preview-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cf-preview-lvl     { color: #ffd060; font-weight: 700; font-size: 17px; font-family: Calibri, sans-serif; }
.cf-preview-rarity  { font-size: 16px; font-weight: 700; font-family: Calibri, sans-serif; }
.cf-preview-vs {
  font-size: 18px;
  color: #b090d0;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: Calibri, sans-serif;
}

/* ── Picker view ───────────────────────────────────────────────────────── */
.cf-picker-title {
  font-size: 21px;
  font-weight: 700;
  color: #f0c0ff;
  text-align: center;
  padding: 12px 16px 4px;
  font-family: Calibri, sans-serif;
}
.cf-picker-self-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid #3a186033;
  background: rgba(58, 24, 96, 0.18);
  flex-wrap: wrap;
}
.cf-picker-self-lbl { font-size: 16px; color: #b090d0; font-family: Calibri, sans-serif; font-weight: 700; }
.cf-picker-self-name { font-size: 17px; font-weight: 700; font-family: Calibri, sans-serif; }
.cf-picker-back {
  margin-left: auto;
  background: #2a1a40;
  border: 1px solid #6040a0;
  color: #d0b0ff;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-family: Calibri, sans-serif;
  font-weight: 700;
}
.cf-picker-back:hover { background: #3a2a50; }

/* Sort toolbar — mirrors .cylarmy-sort-btn styling from harem window */
.cf-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 10px;
}
.cf-picker-toolbar-label {
  font-size: 13px;
  font-weight: 700;
  color: #6050a0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
  font-family: Calibri, sans-serif;
}
.cf-pick-sort-btn {
  background: #1a0a24;
  border: 1px solid #3a1850;
  border-radius: 6px;
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 700;
  color: #8070a0;
  cursor: pointer;
  transition: all 0.12s;
  font-family: Calibri, sans-serif;
}
.cf-pick-sort-btn:hover {
  background: #2a1040;
  border-color: #5a3080;
  color: #c0a0e0;
}
.cf-pick-sort-btn.active {
  background: #2a1050;
  border-color: #7040c0;
  color: #d0b0ff;
}

.cf-picker-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
  align-content: start;
}
.cf-pick-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #1a0830, #0e0420);
  border: 1.5px solid #5030a055;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #f0d0ff;
  /* PERF: dropped box-shadow from the transition so the lift-shadow snaps
     instead of repainting 7+ frames over 120ms. The lift transform stays
     compositor-only. */
  transition: transform 0.12s, border-color 0.12s;
}
.cf-pick-card:hover {
  border-color: #b070ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(140, 70, 210, 0.35);
}
.cf-pick-cyl {
  width: 14px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  box-shadow: inset 0 6px 8px rgba(255, 255, 255, 0.18), inset 0 -8px 10px rgba(0, 0, 0, 0.35);
}
.cf-pick-info { flex: 1; min-width: 0; }
.cf-pick-name {
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Calibri, sans-serif;
}
.cf-pick-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.cf-pick-lvl, .cf-pick-hp {
  font-size: 14px;
  color: #c0a0e0;
  background: #2a1a40;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: Calibri, sans-serif;
  font-weight: 700;
}
.cf-pick-rarity { font-size: 14px; margin-top: 3px; font-family: Calibri, sans-serif; font-weight: 700; }

/* ── Multi-select team picker (up to 3) ─────────────────────────────────── */
.cf-pick-card.cf-pick-selected {
  border-color: #5acc6a;
  box-shadow: 0 0 0 2px #5acc6a inset, 0 6px 18px rgba(90, 204, 106, 0.25);
}
.cf-pick-sel-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #5acc6a;
  color: #0b2410;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Calibri, sans-serif;
}
.cf-pick-card { position: relative; }
.cf-team-confirmbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 4px;
}
.cf-team-count { font-size: 15px; color: #c0a0e0; font-family: Calibri, sans-serif; font-weight: 700; }
.cf-team-start-btn {
  background: linear-gradient(180deg, #6a30c0, #4a1f90);
  border: 1.5px solid #b070ff;
  border-radius: 9px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 7px 20px;
  cursor: pointer;
  font-family: Calibri, sans-serif;
  transition: transform 0.12s, filter 0.12s;
}
.cf-team-start-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.cf-team-start-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cf-team-sep { color: #6a4a90; margin: 0 4px; }

/* ── Choose-fighter screen (after opponent locks in) ────────────────────── */
.cf-choose-foe-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px 4px;
  font-family: Calibri, sans-serif;
  font-weight: 700;
  color: #f0d0ff;
  font-size: 16px;
}
.cf-choose-foe-cyl {
  width: 14px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 6px 8px rgba(255, 255, 255, 0.18), inset 0 -8px 10px rgba(0, 0, 0, 0.35);
}
.cf-choose-eff {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.cf-eff-tag {
  font-size: 13px;
  font-weight: 800;
  font-family: Calibri, sans-serif;
  background: #2a1a40;
  border-radius: 4px;
  padding: 1px 6px;
}

.cf-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b090d0;
  font-size: 18px;
  padding: 20px;
  text-align: center;
  font-family: Calibri, sans-serif;
  font-weight: 700;
}

/* ── Battle view ───────────────────────────────────────────────────────── */
.cf-battle-modal { background: linear-gradient(180deg, #1a0a30 0%, #0d0820 50%, #160826 100%); }

.cf-arena {
  flex: 1 1 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 18px 20px;
  gap: 12px;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(140, 70, 210, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 20%, rgba(255, 180, 80, 0.15), transparent 60%),
    linear-gradient(180deg, #1a0a30 0%, #0d0820 60%, #160826 100%);
  overflow: hidden;
  min-height: 0;
}
/* Foe top-right, you bottom-left — Pokemon layout */
.cf-side-foe { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.cf-side-you { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; }

.cf-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  width: 280px;
  max-width: 100%;
}
.cf-side-foe { flex-direction: column; }
.cf-side-you { flex-direction: column-reverse; }

.cf-info-card {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(216,216,224,0.5) 100%);
  border: 2px solid #303050;
  border-radius: 8px;
  padding: 6px 10px;
  color: #1a1a30;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 18px var(--type-color, transparent);
  position: relative;
}
.cf-info-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 12px var(--type-color, transparent);
  opacity: 0.55;
}
.cf-info-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.cf-info-name {
  font-weight: 800;
  font-size: 17px;
  color: #18182a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-info-lvl { font-size: 14px; color: #444; font-weight: 800; font-family: 'Pokemon Pixel', 'Courier New', monospace; letter-spacing: 0.5px; }
.cf-info-types {
  margin: 3px 0 2px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cf-hp-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cf-hp-label {
  font-weight: 800;
  color: #d0a000;
  font-size: 13px;
  letter-spacing: 0.05em;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
}
.cf-hp-bar {
  flex: 1;
  height: 7px;
  background: #585870;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #1a1a30;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.cf-hp-fill {
  height: 100%;
  background: #5acc6a;
  transition: width 0.45s ease, background 0.45s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.cf-hp-num {
  text-align: right;
  font-size: 13px;
  color: #1a1a30;
  font-weight: 800;
  margin-top: 2px;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
}

.cf-cyl-stage {
  position: relative;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cf-cyl {
  width: 32px;
  height: 95px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 14px 14px rgba(255, 255, 255, 0.22),
    inset 0 -16px 14px rgba(0, 0, 0, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.6);
  /* Two layered idles for life: a faster bob + a slower sway/squash. */
  animation: cfBob 1.1s ease-in-out infinite, cfSway 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
@keyframes cfBob {
  0%, 100% { transform: translateY(0) rotate(-3deg) scaleY(1); }
  50%      { transform: translateY(-7px) rotate(3deg) scaleY(0.96); }
}
@keyframes cfSway {
  0%, 100% { transform: translateX(0) skewX(0deg); }
  25%      { transform: translateX(-2px) skewX(-1.5deg); }
  75%      { transform: translateX(2px) skewX(1.5deg); }
}

/* Attack lunges. Override the idle animations for ~420ms then fall back. */
.cf-attack-you {
  animation: cfAttackYou 0.42s cubic-bezier(0.25, 1.4, 0.4, 1) !important;
}
.cf-attack-foe {
  animation: cfAttackFoe 0.42s cubic-bezier(0.25, 1.4, 0.4, 1) !important;
}
@keyframes cfAttackYou {
  0%   { transform: translate(0, 0) rotate(0deg) scaleY(1); }
  18%  { transform: translate(-4px, 4px) rotate(-12deg) scaleY(0.85); }
  45%  { transform: translate(28px, -22px) rotate(22deg) scaleY(1.05); }
  70%  { transform: translate(20px, -16px) rotate(14deg) scaleY(1); }
  100% { transform: translate(0, 0) rotate(0deg) scaleY(1); }
}
@keyframes cfAttackFoe {
  0%   { transform: translate(0, 0) rotate(0deg) scaleY(1); }
  18%  { transform: translate(4px, -4px) rotate(12deg) scaleY(0.85); }
  45%  { transform: translate(-28px, 22px) rotate(-22deg) scaleY(1.05); }
  70%  { transform: translate(-20px, 16px) rotate(-14deg) scaleY(1); }
  100% { transform: translate(0, 0) rotate(0deg) scaleY(1); }
}
.cf-cyl-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  transform: translateX(-50%);
}

.cf-shake {
  animation: cfShake 0.36s ease-in-out;
}
@keyframes cfShake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-6px, 2px) rotate(-4deg); }
  40%      { transform: translate(5px, -3px) rotate(3deg); }
  60%      { transform: translate(-4px, 1px) rotate(-2deg); }
  80%      { transform: translate(3px, 2px) rotate(2deg); }
}

.cf-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cf-hit-flash {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 0 12px currentColor);
  animation: cfFlash 0.6s ease-out forwards;
  opacity: 0.85;
}
.cf-hit-foe { top: 14%; right: 10%; }
.cf-hit-you { bottom: 14%; left: 10%; }
@keyframes cfFlash {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── Bottom: text box + actions ───────────────────────────────────────── */
.cf-bottom {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid #503080;
  background: #0d0818;
  min-height: 150px;
}
.cf-textbox {
  padding: 14px 18px;
  border-right: 2px solid #503080;
  background: linear-gradient(180deg, #160a28, #0d0818);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #e0c0ff;
  min-height: 130px;
  letter-spacing: 0.02em;
  line-height: 1.45;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
}
.cf-text-line { opacity: 0.55; padding: 1px 0; }
.cf-text-current { opacity: 1; color: #fff; text-shadow: 0 0 8px rgba(255, 180, 100, 0.45); }

.cf-actions {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
  background: linear-gradient(180deg, #0d0818, #160a28);
}
.cf-moves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}
.cf-move-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #1a0830, #0e0420);
  border: 2px solid var(--type-color, #6030b0);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #f0d0ff;
  /* PERF: dropped box-shadow + filter from the transition list. Snapping the
     shadow saves the per-frame repaint; the brightness flash is now a stronger
     pseudo overlay opacity (rides the compositor). */
  transition: transform 0.1s;
  position: relative;
  overflow: hidden;
}
.cf-move-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--type-color, transparent);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.12s;
}
.cf-move-btn:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--type-color, rgba(140, 70, 210, 0.5));
}
.cf-move-btn:hover:not([disabled])::before {
  opacity: 0.18;
}
.cf-move-btn[disabled] {
  filter: grayscale(0.7) brightness(0.65);
  cursor: not-allowed;
}
.cf-move-name {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

/* Pixel-font pass for battle cylinder names + move buttons (cock fight + raid).
   Picker / slot / preview screens use Calibri instead — see those rules above. */
.cf-info-name,
.cf-move-name,
.cf-move-pp,
.rd-ally-name {
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
}
.cf-move-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.cf-move-type {
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.cf-move-pp {
  color: #b090d0;
  font-weight: 600;
}

.cf-run-btn {
  padding: 8px 12px;
  background: #2a1a30;
  border: 1px solid #5a3a60;
  color: #c0a0d0;
  border-radius: 8px;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.cf-run-btn:hover { background: #3a2a40; }

.cf-bag-btn {
  padding: 8px 12px;
  background: #1a2c3a;
  border: 1px solid #3a608a;
  color: #a0c8e8;
  border-radius: 8px;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
  margin-right: 6px;
}
.cf-bag-btn:hover { background: #25405a; }

.cf-switch-btn {
  padding: 8px 12px;
  background: #1a3028;
  border: 1px solid #3a8060;
  color: #a0e8c8;
  border-radius: 8px;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
  margin-right: 6px;
}
.cf-switch-btn:hover { background: #234838; }

.cf-switch-title {
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  color: #d0e8d8;
  font-size: 14px;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}
.cf-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.cf-switch-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #14201c;
  border: 1px solid #3a6050;
  border-radius: 8px;
  cursor: pointer;
  color: #d8f0e0;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  text-align: left;
}
.cf-switch-card:hover {
  background: #1c302a;
  border-color: #6cc0a0;
  transform: translateY(-1px);
}

/* Type effectiveness preview badge on move buttons */
.cf-eff {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 800;
  border-radius: 3px;
  letter-spacing: 0.05em;
  vertical-align: 1px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.55);
}
.cf-eff-super { background: #ffb030; color: #2a1500; box-shadow: 0 0 6px rgba(255,176,48,0.55); }
.cf-eff-good  { background: #ffe070; color: #2a1500; }
.cf-eff-bad   { background: #6080a8; color: #fff; }
.cf-eff-weak  { background: #6080a8; color: #fff; }
.cf-eff-none  { background: #c83030; color: #fff; }

/* Ball-type picker shown after clicking BAG in a wild battle */
.cf-ball-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.cf-ball-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 10px;
  background: #14201c;
  border: 1px solid #3a6050;
  border-radius: 8px;
  cursor: pointer;
  color: #d8f0e0;
  font-family: 'Pokemon Pixel', 'Courier New', monospace;
  letter-spacing: 0.5px;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  text-align: left;
}
.cf-ball-card:hover {
  background: #1c302a;
  border-color: #6cc0a0;
  transform: translateY(-1px);
}
.cf-ball-card[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.cf-ball-name {
  font-size: 13px;
  color: #ffe0a0;
}
.cf-ball-meta {
  font-size: 11px;
  color: #a0c8b0;
}
.cf-switch-cyl {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #666;
  flex: 0 0 auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.cf-switch-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cf-switch-name {
  font-size: 13px;
  color: #ffe0a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-switch-sub {
  font-size: 11px;
  color: #a0c8b0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cf-result {
  font-size: 18px;
  font-weight: 800;
  color: #ffe0a0;
  text-align: center;
  padding: 10px 0;
  text-shadow: 0 0 12px rgba(255, 180, 80, 0.5);
}
.cf-result-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.cf-again-btn, .cf-close-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  /* PERF: dropped filter from transition; swapped filter:brightness hover for
     a brighter background gradient (paint-only, no layer churn). */
  transition: background 0.12s;
}
.cf-again-btn {
  background: linear-gradient(180deg, #c06030, #803010);
  border: 1px solid #ffa050;
  color: #fff;
  box-shadow: 0 2px 10px rgba(192, 96, 48, 0.4);
}
.cf-again-btn:hover { background: linear-gradient(180deg, #e07840, #a04018); }
.cf-close-btn {
  background: #2a1a40;
  border: 1px solid #6040a0;
  color: #d0b0ff;
}
.cf-close-btn:hover { background: #3a2a50; }

/* Mobile fallback — stack the arena */
@media (max-width: 720px) {
  .cf-modal { height: 92vh; }
  .cf-arena {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 12px 12px;
  }
  .cf-side-foe, .cf-side-you {
    grid-column: 1;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .cf-side-foe { grid-row: 1; align-self: start; }
  .cf-side-you { grid-row: 2; align-self: end; }
  .cf-bottom { grid-template-columns: 1fr; }
  .cf-textbox { border-right: none; border-bottom: 2px solid #503080; min-height: 80px; }
}