/*
  HOOD WARFARE — Urban Tactical FPS Theme
  High-Contrast Dark UI with Faction Colorways (#1252cc Crips / #cc141a Bloods)
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0b0d11;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #ffffff;
}

#application-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  display: block;
}

/* UI Screen Wrappers */
.ui-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
}

/* -------------------------------------------------------------
   SCREEN 1: SERVER BROWSER
   ------------------------------------------------------------- */
#screen-server-browser {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(16, 20, 28, 0.75) 0%, rgba(5, 7, 10, 0.92) 100%);
  pointer-events: auto;
}

.browser-panel {
  width: 900px;
  max-width: 94vw;
  background: rgba(18, 22, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 32px rgba(30, 90, 168, 0.2);
  padding: 32px;
  backdrop-filter: blur(12px);
}

.browser-header {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.game-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(90deg, #1868ff, #ffffff, #ff2228);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.game-subtitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8c9ba5;
  margin-top: 4px;
}

.callsign-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  background: rgba(0, 0, 0, 0.4);
  padding: 12px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.callsign-section label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #a0b0c0;
}

.callsign-section input {
  flex: 1;
  background: #11151c;
  border: 1px solid #2a3442;
  color: #00e5ff;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
}

.callsign-section input:focus {
  border-color: #00e5ff;
}

.server-list-section {
  max-height: 340px;
  overflow-y: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 13, 18, 0.6);
}

.server-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.server-table th {
  background: rgba(20, 26, 36, 0.95);
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #7b8a96;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.server-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
}

.server-table tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.col-players .bot-badge {
  font-size: 12px;
  color: #38bdf8;
  margin-left: 6px;
}

.crip-score {
  color: #38bdf8;
  font-weight: 800;
}

.blood-score {
  color: #ef4444;
  font-weight: 800;
}

.btn-join-room {
  background: linear-gradient(135deg, #1868ff, #0050d0);
  border: none;
  color: #ffffff;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(24, 104, 255, 0.3);
  transition: all 0.15s ease;
}

.btn-join-room:hover {
  background: linear-gradient(135deg, #2b78ff, #0a60e0);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 104, 255, 0.5);
}

.browser-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #556270;
}

/* -------------------------------------------------------------
   SCREEN 2: FACTION & LOADOUT SELECTION
   ------------------------------------------------------------- */
#screen-team-select {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 10, 0.65);
  pointer-events: auto;
}

.team-select-panel {
  width: 960px;
  max-width: 95vw;
  background: rgba(14, 17, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  text-align: center;
}

.section-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #c0d0e0;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.alert-box {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #fca5a5;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
}

.factions-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.faction-card {
  position: relative;
  background: rgba(20, 24, 34, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  text-align: left;
}

.faction-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.crip-card.selected {
  border-color: #1868ff;
  box-shadow: 0 0 24px rgba(24, 104, 255, 0.45), inset 0 0 16px rgba(24, 104, 255, 0.2);
}

.blood-card.selected {
  border-color: #ff2228;
  box-shadow: 0 0 24px rgba(255, 34, 40, 0.45), inset 0 0 16px rgba(255, 34, 40, 0.2);
}

.faction-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #8c9ba5;
  margin-bottom: 6px;
}

.crip-card .faction-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #38bdf8;
}

.blood-card .faction-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ef4444;
}

.faction-desc {
  font-size: 13px;
  color: #9aa8b6;
  margin: 10px 0 16px;
  line-height: 1.4;
}

.faction-count {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.loadouts-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.loadout-card {
  background: rgba(20, 24, 34, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.loadout-card:hover {
  background: rgba(25, 30, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}

.loadout-card.selected {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.25);
}

.lo-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #64748b;
  margin-bottom: 4px;
}

.lo-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.lo-stats {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}

.btn-primary-deploy {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(135deg, #00e5ff, #0099cc);
  border: none;
  color: #000000;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.4);
  transition: all 0.15s ease;
}

.btn-primary-deploy:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 229, 255, 0.6);
}

/* -------------------------------------------------------------
   SCREEN 3: ACTIVE IN-GAME HUD
   ------------------------------------------------------------- */
#screen-hud {
  pointer-events: none;
}

/* Top-Left Scoreboard & Timer */
.hud-top-left {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 18, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  width: fit-content;
}

.score-bars-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(14, 18, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 14px;
  border-radius: 6px;
  width: 280px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  width: 50px;
}

.crip-label { color: #38bdf8; }
.blood-label { color: #ef4444; }

.bar-track {
  flex: 1;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.crip-fill { background: linear-gradient(90deg, #1868ff, #38bdf8); }
.blood-fill { background: linear-gradient(90deg, #dc2626, #ef4444); }

.score-val {
  font-size: 13px;
  font-weight: 900;
  width: 24px;
  text-align: right;
}

.crip-val { color: #38bdf8; }
.blood-val { color: #ef4444; }

/* Top-Right Killfeed */
.hud-top-right {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.killfeed-item {
  background: rgba(15, 20, 28, 0.85);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: slideInRight 0.2s ease-out;
  transition: opacity 0.5s ease;
}

.killfeed-item.fade-out {
  opacity: 0;
}

.kf-killer.team-crips, .kf-victim.team-crips { color: #38bdf8; }
.kf-killer.team-bloods, .kf-victim.team-bloods { color: #ef4444; }
.kf-weapon { color: #94a3b8; font-size: 11px; font-weight: 900; }
.kf-headshot { color: #fbbf24; font-size: 11px; font-weight: 900; }

@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Bottom-Left Health & Status */
.hud-bottom-left {
  position: absolute;
  bottom: 28px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-badge-row {
  display: flex;
  gap: 8px;
}

.faction-badge {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
}

.faction-badge.crips {
  background: rgba(24, 104, 255, 0.35);
  border: 1px solid #1868ff;
  color: #38bdf8;
}

.faction-badge.bloods {
  background: rgba(239, 68, 68, 0.35);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.posture-badge {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #a0aec0;
}

.health-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 18, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 16px;
  border-radius: 6px;
  width: 260px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.hp-number-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.hp-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
}

#hud-hp-val {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
}

.hp-bar-track {
  flex: 1;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 0.15s ease;
}

/* Bottom-Right Weapon & Ammo */
.hud-bottom-right {
  position: absolute;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.weapon-info-box {
  background: rgba(14, 18, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 20px;
  border-radius: 6px;
  text-align: right;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.weapon-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.ammo-counter {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.ammo-mag {
  font-size: 38px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.ammo-slash {
  font-size: 18px;
  font-weight: 700;
  color: #475569;
}

.ammo-reserve {
  font-size: 18px;
  font-weight: 800;
  color: #94a3b8;
}

.reload-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.reload-fill {
  height: 100%;
  background: #00e5ff;
  transition: width 0.05s linear, opacity 0.2s ease;
}

.keybinds-row {
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #64748b;
}

/* -------------------------------------------------------------
   DYNAMIC CROSSHAIR & HITMARKER
   ------------------------------------------------------------- */
#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 15;
  --spread: 10px;
}

.ch-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.ch-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.ch-top {
  width: 2px;
  height: 8px;
  left: 50%;
  top: calc(50% - var(--spread) - 8px);
  transform: translateX(-50%);
}

.ch-bottom {
  width: 2px;
  height: 8px;
  left: 50%;
  top: calc(50% + var(--spread));
  transform: translateX(-50%);
}

.ch-left {
  height: 2px;
  width: 8px;
  top: 50%;
  left: calc(50% - var(--spread) - 8px);
  transform: translateY(-50%);
}

.ch-right {
  height: 2px;
  width: 8px;
  top: 50%;
  left: calc(50% + var(--spread));
  transform: translateY(-50%);
}

#hitmarker {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 20;
}

.hm-line {
  position: absolute;
  width: 10px;
  height: 2.5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

#hitmarker.body .hm-line { background: #ffffff; }
#hitmarker.headshot .hm-line { background: #ff2228; }

.hm-tl { top: 6px; left: 6px; transform: rotate(45deg); }
.hm-tr { top: 6px; right: 6px; transform: rotate(-45deg); }
.hm-bl { bottom: 6px; left: 6px; transform: rotate(-45deg); }
.hm-br { bottom: 6px; right: 6px; transform: rotate(45deg); }

/* Directional Blood Damage Vignette */
#damage-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 40%, rgba(220, 20, 20, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 5;
}

/* Spawns Flipped Banner */
.game-banner {
  display: none;
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(234, 179, 8, 0.95);
  color: #000000;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 8px 32px rgba(234, 179, 8, 0.5);
  z-index: 25;
  animation: pulseBanner 0.8s infinite alternate;
}

@keyframes pulseBanner {
  from { transform: translateX(-50%) scale(1); }
  to { transform: translateX(-50%) scale(1.04); }
}

/* Projected Remote Nametag Labels */
#nametag-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.remote-nametag {
  position: absolute;
  transform: translate(-50%, -100%);
  display: none;
  text-align: center;
  pointer-events: none;
}

.nametag-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 4px #000;
  margin-bottom: 2px;
}

.remote-nametag.team-crips .nametag-title { color: #38bdf8; }
.remote-nametag.team-bloods .nametag-title { color: #ef4444; }

.nametag-bar {
  width: 52px;
  height: 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}

.nametag-fill {
  height: 100%;
  background: #22c55e;
}

/* Death / Respawn Overlay */
.death-overlay, .match-over-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.death-overlay {
  background: rgba(140, 20, 20, 0.45);
  backdrop-filter: blur(6px);
}

.death-panel, .match-over-panel {
  background: rgba(15, 18, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
}

.death-title {
  font-size: 28px;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.death-killer-text {
  font-size: 15px;
  color: #e2e8f0;
  margin-bottom: 16px;
}

.death-countdown {
  font-size: 14px;
  font-weight: 800;
  color: #94a3b8;
}

.match-over-overlay {
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(12px);
}

.match-over-banner {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 12px;
}

.match-over-sub {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
}

.match-over-wait {
  font-size: 13px;
  color: #94a3b8;
}

/* Scoreboard TAB Modal */
.scoreboard-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 12, 0.7);
  backdrop-filter: blur(8px);
  z-index: 28;
}

.sb-container {
  width: 840px;
  max-width: 92vw;
  background: rgba(16, 20, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
}

.sb-header {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 20px;
  color: #cbd5e1;
}

.sb-teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sb-team-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.crips-col .sb-team-title { color: #38bdf8; border-color: #1868ff; }
.bloods-col .sb-team-title { color: #ef4444; border-color: #dc2626; }

.sb-table-head, .sb-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 6px 8px;
  font-size: 12px;
}

.sb-table-head {
  font-weight: 800;
  color: #64748b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sb-row {
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.sb-row.is-bot .sb-name {
  color: #94a3b8;
}

.sb-kills { color: #22c55e; }
.sb-deaths { color: #ef4444; }
.sb-kd { color: #e2e8f0; }

/* Click to Play / Mouse Lock Prompt Overlay */
.click-to-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: pointer;
  z-index: 22;
}

.click-to-play-card {
  background: rgba(14, 18, 24, 0.95);
  border: 2px solid #00e5ff;
  border-radius: 8px;
  padding: 24px 36px;
  text-align: center;
  box-shadow: 0 0 32px rgba(0, 229, 255, 0.45);
  animation: pulseCard 1.2s infinite alternate;
}

.c2p-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.c2p-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #00e5ff;
  margin-bottom: 6px;
}

.c2p-subtitle {
  font-size: 13px;
  color: #94a3b8;
}

@keyframes pulseCard {
  from { transform: scale(1); }
  to { transform: scale(1.03); }
}